Кнопка Hoverable над картой Hoverable?

Question

У меня есть карта, которую можно найти, и мне нужна кнопка на карте, которая также доступна, это возможно?

Я пытался;

<div class="card border-0" style="width: 100%;">
    <img class="card-img-top" src="image here" alt="Card image">
    <div class="card-img-overlay">
        <div class="bottom text-light text-left">
            <h4>{{ ucwords(trans($group->group_title)) }}</h4>

        <button type="button" class="btn btn-light btn-circle" data-toggle="tooltip" data-placement="top" title="Join the group"><i class="fa fa-star"></i></button>
    </div>
    <a href="{{ route('groups.show',$group->id)}}" class="stretched-link"></a>
</div>

Ноbtn btn-light btn-circle не отображается и не показывает подсказку?

Я пытался добавить style="z-index:2" к кнопке, но без радости.

<div class="card border-0" style="width: 100%;">
    <img class="card-img-top" src="image" alt="Card image">
    <div class="card-img-overlay">
        <div class="bottom text-light text-left">
            <h4>{{ ucwords(trans($group->group_title)) }}</h4>
            <br>
            <h5>1,235 members</h5>
        </div>
        <button type="button" class="btn btn-light btn-circle" style="z-index:2" data-join-group="terms" data-toggle="tooltip" data-placement="top" title="Join the group"><i class="fa fa-star"></i></button>
    </div>
    <a href="{{ route('groups.show',$group->id)}}" class="stretched-link"></a>
</div>

Answer 1

Что я понимаю из вашего вопроса, что вы хотите отобразить tooltip как на кнопке, так и на карте, если это правильно, вот код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card border-0" style="width: 100%;" data-toggle="tooltip" data-placement="bottom" title="Card tooltip">
    <img class="card-img-top" src="image here" alt="Card image">
    <div class="card-img-overlay">
        <div class="bottom text-light text-left">
            <h4>Some Text</h4>
        <button type="button" class="btn btn-light btn-circle" data-toggle="tooltip" data-placement="top" title="Join the group"><i class="fa fa-star"></i>Button</button>
    </div>
    <a href="#" class="stretched-link"></a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>