English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A tooltip is a small popup that appears when the mouse moves over an element and disappears when the mouse moves away from the element.
By adding data to the element-toggle="tooltip" Let's create a tooltip.
The content of the title attribute is the content displayed in the tooltip:
<a href="#" data-toggle="tooltip" title="I am the tooltip content!">Move the mouse over me</a>
Note: The tooltip needs to be written in the jQuery initialization code: then call the tooltip() method on the specified element.
The following examples can be used anywhere in the document:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
<h2>Tooltip example</h2><br>
<a href="#" data-toggle="tooltip" title="I am the tooltip content!">Move the mouse over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>Test and see ‹/›The effect after running is as follows:
By default, the tooltip is displayed above the element.
You can use data-The placement attribute is used to set the direction of the tooltip display: top, bottom, left, or right:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
<h2>Tooltip example</h2><br>
<a href="#" data-toggle="tooltip" data-placement="top" title="I am the tooltip content!">Move the mouse over me</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="I am the tooltip content!">Move the mouse over me</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="I am the tooltip content!">Hover over me</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="I am the tooltip content!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>Test and see ‹/›The effect after running is as follows:
Use in button:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>Test and see ‹/›The effect after running is as follows:
Add HTML tags to the tooltip content, set data-html="true", content placed inside the title tag:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
Tooltip with HTML
</button>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>Test and see ‹/›The effect after running is as follows:
禁用按钮：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>Test and see ‹/›The effect after running is as follows: