使用Bootstrap 4.3,我创建了一个带有工具提示的卡片元素。效果很好。
但是,当我向卡片(reference)添加延伸链接时,工具提示将不再起作用。
有什么建议吗?
编辑
这是工具提示不起作用的情况的代码示例:
<div class="card ">
<div class="card-body">
<h5 class="card-title">Meeting Cancelled</h5>
<p class="card-text">
Alex has cancelled your meeting.
</p>
</div>
<span class="time" data-toggle="tooltip" title="" data-original-title="17 July 2019, 11:39">39 minutes ago</span>
</div>
<a class="stretched-link" href="http://localhost:3000/my/meetings"></a>
</div>
答案 0 :(得分:0)
请检查其在延伸链接中可使用的代码段,看起来您缺少js或需要添加工具提示功能。
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div class="card ">
<div class="card-body">
<h5 class="card-title">Meeting Cancelled</h5>
<p class="card-text">
Alex has cancelled your meeting.
</p>
</div>
<span class="time" data-toggle="tooltip" title="" data-original-title="17 July 2019, 11:39">39 minutes ago</span>
</div>
<a class="stretched-link" href="http://localhost:3000/my/meetings"></a>
</div>
答案 1 :(得分:-3)
您好,您可以使用title="something".
作为工具提示
标题也像工具提示一样工作。