Question

我有这个简短的样本：

代码HTML：

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

ASDA

link exampe

不明白为什么W3Schools的例子与我的不同。

我实际上放了相同的代码并实现了bootstrap库。

您能否告诉我问题是什么？示例显示两者有什么不同？

Answer 1

他们使用此代码来获得与您的一行代码不同的结果

         <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
</div>
<script>$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

</body>
</html>

重要的是要注意这部分

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

AND此API：

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

所以我使用了他们，发现当你删除上面的javascript代码时，结果与你的相同。因此，将上述脚本元素添加到您的代码中并链接引导程序库和 Bootstrap-combined.css 。

要获取文本上方的工具提示，请使用以下代码：

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

这样做会得到与

相同的结果

有关更多参考，请使用此link

Answer 2

添加数据展示位置属性

<a href="javascript:void(0);" data-toggle="tooltip" data-placement="right" title="" data-original-title="Hooray!">Hover over me</a>

以下是Tooltip的引导文档

http://getbootstrap.com/javascript/#tooltips

创建Bootstrap工具提示

2 个答案: