Tooltips
A tooltip is quite useful for showing the description of different elements in the webpage. The tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depend on the 3rd party library Tether for positioning. We can even customize this tooltip according to our requirements. Some of them are:
Class | Description | Syntax |
---|---|---|
Placement | Used to place a tooltip. | data-placement = “top|bottom|right|left” |
Html | Adds HTML to a tooltip. | data-html = “true” |
Offset | Sets the offset of the tool-tip relative to target. | data-offset = “number|string” |
Animation | Adds or removes animation to tooltip. | data-animation = “true|false” |
Trigger | Adds the event which will trigger tooltip. | data-trigger = “hover focus” |
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltip</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:green;">
w3wiki
</h1>
<h2>Positioning Tooltip</h2>
<button data-toggle="tooltip" data-placement="top"
title="Top tooltip">Top
</button>
<button data-toggle="tooltip" data-placement="bottom"
title="Bottom tooltip">Bottom
</button>
<button data-toggle="tooltip" data-placement="left"
title="Left tooltip">Left
</button>
<button data-toggle="tooltip" data-placement="right"
title="Right tooltip">Right
</button>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us