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>

将鼠标悬停在hoverablecard上？

1 个答案: