Question

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

Answer 1

请检查其在延伸链接中可使用的代码段，看起来您缺少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>

Answer 2

您好，您可以使用title="something".作为工具提示标题也像工具提示一样工作。

具有延伸链接的引导卡-卡中的工具提示不再起作用

2 个答案: