Bootstrap 4 可悬停卡上方的可悬停按钮？

我有一张可以悬停的卡片，我想在卡片上有一个按钮也可以悬停，可以吗

我试过了

<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>

---

我从您的问题中了解到，您希望在按钮和卡上同时显示

工具提示

，如果正确，代码如下：

一些文本
按钮
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});

<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>