Tooltip is a small popup box that appears when a user move the cursor over a button or a link which give the user, knowledge or a hint about that specific button or link. Tooltips are useful for the new users of a website to save them from confusion or any kind of a problem while exploring your website.
This article will teach you about
How to create tooltip
To create a tooltip use, data attribute “data-bs-toggle=”tooltip” in your tag or and the text which is shown in tooltip must be written using the title attribute.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-1.gif" height="290" src="data:image/svg xml,” width=”994″>
<body>
<div class=“container” style=“margin-top: 15px;”>
<div class=“row”>
<div class=“col-lg”>
<h2>Tooltip with Link</h2>
<br>
<a href=“#” data-bs-toggle=“tooltip” title=“This tooltip is created for link”>Place cursor here</a>
</div>
<div class=“col-lg”>
<h1>Tooltip with button</h1>
<br>
<button type=“button” class=“btn btn-primary” data-bs-toggle=“tooltip” title=“This tooltip is created for button”>Place cursor here</button>
</div>
</div>
</div>
</script>
$(document).ready(function(){
$(‘[data-bs-toggle=”tooltip”]’).tooltip();
});
</script>
<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
<script src=“https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js” ></script>
<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js”></script>
</body>
Now let me tell you that in bootstrap 5 to create a tooltip we need to add data attributes in tag or and also write a jquery to enable it. So I break the creation process into steps which will give you better understanding.
Steps
Creating a tooltip in bootstrap 5 is a simple two step process
Step 1: Add data-bs-toggle=”tooltip” and title=”Tooltip text goes here” attributes in your .
<div class=“col-lg”>
<h2>Tooltip with Link</h2>
<br>
<a href=“#” data-bs-toggle=“tooltip” title=“This tooltip is created for link”>Place cursor here</a>
</div>
<div class=“col-lg”>
<h2>Tooltip with button</h2>
<br>
<button type=“button” class=“btn btn-primary” data-bs-toggle=“tooltip” title=“This tooltip is created for button”>Place cursor here</button>
</div>
Step 2: Enable tooltips by writing jquery following code
<script>
$(document).ready(function(){
$(‘[data-bs-toggle=”tooltip”]’).tooltip();
});
</script>
Positioning of tooltips
So to position a tooltip as your requirement just add data-bs-placement=”top/right/left/bottom” attribute to your or to change tooltip position.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image2-1.gif" height="322" src="data:image/svg xml,” width=”596″>
<div class=“container” style=“margin-top: 30px;”>
<button class=“btn btn-primary” data-bs-toggle=“tooltip” data-bs-placement=“top” title=“Top position tooltip”>Top</button>
<button class=“btn btn-primary” data-bs-toggle=“tooltip” data-bs-placement=“right” title=“Right position tooltip”>Right</button>
<button class=“btn btn-primary” data-bs-toggle=“tooltip” data-bs-placement=“bottom” title=“Bottom position tooltip”>bottom</button>
<button class=“btn btn-primary” data-bs-toggle=“tooltip” data-bs-placement=“left” title=“Left position tooltip”>left</button>
</div>
Conclusion
Tooltips are created by adding data-bs-toggle=”tooltip” and title=”Tooltip text goes here” attributes in and enable it by writing a javascript code. For positioning just add data-bs-placement=”top/bottom/right/left” attribute to .
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg625e23e945d38.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
