bootstrap中的toottip组件如何使用,请举例
时间: 2023-06-24 10:07:49 浏览: 44
Bootstrap中的tooltips组件提供了一种简单的方式来创建提示信息,这些提示信息会在鼠标悬停在某个元素上时显示出来。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tooltip Example</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Tooltip Example</h1>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
</div>
<!-- 引入jQuery和Bootstrap的JS文件 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>
```
这个例子中,我们创建了四个按钮,并为每个按钮添加了 `data-toggle="tooltip"` 和 `title` 属性。`data-toggle="tooltip"` 属性告诉Bootstrap这是一个tooltip组件,而 `title` 属性则是要显示的提示信息。
为了使这些tooltip生效,我们需要再引入jQuery和Bootstrap的JS文件,并在文档加载完成后调用一下 `$('[data-toggle="tooltip"]').tooltip();` 这个方法即可。
另外,我们还可以使用 `data-placement` 属性来控制tooltip的位置,可选的值有:top、right、bottom、left,分别表示提示信息出现在目标元素的上、右、下、左方。在上面的例子中,我们为每个按钮都设置了不同的 `data-placement` 属性值,以便演示不同的位置效果。