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

时间:2019-07-17 09:27:20

标签: css bootstrap-4

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

2 个答案:

答案 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".作为工具提示 标题也像工具提示一样工作。