Question

我的锚看起来像

<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable">
  <div class="fc-content"><span class="fc-time">3:42pm</span> <span class="fc-title">Abc</span></div>
</a>

我想添加

data-toggle="tooltip"

并且标题来自<span>值，例如<span class="fc-title">Abc</span> 该怎么做？

Answer 1

您可以使用title选项初始化工具提示。您可以在其中传递一个函数来获取要显示的内容。

$('a').tooltip({
  title: e => $('.fc-title', e).text()
});

a {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>

<br /><br />

<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable" data-toggle="tooltip">
  <div class="fc-content"><span class="fc-time">3:42pm</span> <span class="fc-title">Abc</span></div>
</a>

您可以阅读有关options in the docs的信息。

Answer 2

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <a href="#" data-toggle="tooltip" title="I am anchor">I am anchor</a>
</div>
</body>
</html>

Answer 3

只需在范围内放置数据对话框

<a href="#"><span data-toggle="tooltip" title="I love you">Try</span> Me</a>

并使用

启动

$('[data-toggle="tooltip"]').tooltip();

如何将工具提示添加到锚点

3 个答案: