📌  相关文章
📜  bootstrap 4 工具提示 - Html (1)

📅  最后修改于: 2023-12-03 15:13:40.998000             🧑  作者: Mango

Bootstrap 4 工具提示 - HTML

Bootstrap 4 提供了工具提示的功能，可以通过简单的 HTML 属性来实现。工具提示是一个弹出层，当鼠标悬浮在元素上时会显示相关信息。

如何添加工具提示

添加工具提示非常简单，只需在 HTML 元素上添加 data-toggle="tooltip" 和 title 属性即可。例如，下面的 HTML 代码段将在一个按钮上添加工具提示：

<button type="button" class="btn btn-primary" data-toggle="tooltip" title="这是一个按钮">按钮</button>
使用 JavaScript 初始化工具提示

虽然添加了 data-toggle="tooltip" 和 title 属性，但在没有触发事件时工具提示是不会显示的。要让工具提示显示，需要使用 JavaScript 来初始化。可以使用以下代码初始化工具提示：

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

注意，上述 JavaScript 代码依赖于 jQuery 库。

自定义工具提示样式

Bootstrap 4 工具提示提供了一些默认的样式，但您可以通过 CSS 来自定义样式。可以使用 .tooltip 类来自定义工具提示的背景颜色、边框颜色等。例如：

.tooltip {
    background-color: #f1f1f1;
    color: black;
    border: 1px solid black;
}
示例代码

下面是一个完整的 HTML 代码示例，展示了如何在一个按钮上添加工具提示，以及如何使用 JavaScript 初始化：

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 4 工具提示 - HTML</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

	<style>
	.tooltip {
	    background-color: #f1f1f1;
	    color: black;
	    border: 1px solid black;
	}
	</style>
</head>
<body>
	
	<button type="button" class="btn btn-primary" data-toggle="tooltip" title="这是一个按钮">按钮</button>

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

</body>
</html>

以上就是使用 Bootstrap 4 工具提示的介绍。现在，您可以快速添加漂亮的工具提示到您的网站上了！