Small touches to make your website or blog more attractive are important elements to capture the attention of visitors and extend their stay. Especially if you’re providing technical blogs or educational content, visual cues that help readers understand the content more easily can be very beneficial. In this article, we introduce how to easily implement a bubble tooltip that appears when you hover over a link using the JavaScript library “BubbleTooltips.js.” This not only helps those interested in engineering and web development but also makes web page navigation more intuitive for beginners.
What is BubbleTooltips.js?
BubbleTooltips.js is a JavaScript library that displays the text set in the title attribute of an anchor tag (a tag) as a beautiful bubble when hovered over. Using this library, you can improve the usability of your website and provide a more interactive experience for visitors.
Loading the BubbleTooltips.js Library and Writing JavaScript
First, load the BubbleTooltips.js file. Then, to make BubbleTooltips.js work after the web page is loaded, simply write enableTooltips() after page load (window.onload).
<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>
With this code, the function that displays the content of the title attribute in a bubble will be enabled for all links on the page.
Styling with CSS
With BubbleTooltips.js, you can customize the styling of the text displayed in the bubble. Below is an example. This is the CSS code for the area (.tooltip) where the title text will be displayed in the bubble.
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:2.0em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:700px;
margin:0 auto;
text-align:center;
}
.tooltip{
width: 300px;
color:#FFFFFF;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;
text-align:left;
font-size:11px;
}
.tooltip span.top{
padding:5px;
line-height:140%;
font-size:11px;
background: url(bg01.png) top left repeat;
}
-->
</style>
Setting up Anchor Tags in HTML
Set the text you want to display in the bubble in the title attribute of the link. You only need to set the text you want to display in the bubble in the title attribute of the anchor (a) tag.
<div id="idWrap">
<h1>The text set in the title attribute of the links below will be displayed as a bubble when you hover over them.</h1>
<a href="https://dad-union.com/" title="Dad Union" target="_blank">Dad Union</a><br />
<br /><br />
<a href="https://twitter.com/dad_union_com" title="Dad Union @dad_union_com" target="_blank">Dad Union @dad_union_com</a>
</div><!--/idWrap-->
With this setup, when you hover over the above links, the text “Dad Union” or “Dad Union @dad_union_com” will be displayed in a bubble.
BubbleTooltips.js: Demo Page for Displaying the Title of Link Tags
As a reference for implementation, you can check out a demo page using BubbleTooltips.js from the link below.
BubbleTooltips.js: Demo Page for Displaying the Title of Link Tags
By viewing this demo, you can get a better idea of how it works and looks, which can help you visualize how to apply it to your own site.
Conclusion
By using BubbleTooltips.js, you can easily display the text set in the title attribute of a link tag in a bubble. This small tweak improves the usability of your website or blog and provides more attractive and user-friendly content to visitors. Whether you’re a beginner or an advanced web developer, this is a widely applicable technique that you should definitely try.
By reading this article, you should now have a basic understanding of how to use BubbleTooltips.js. Apply it to your own website or blog to create a more interactive and user-friendly site.
※ Please take responsibility when repurposing this content.
Do not use the Google Analytics tag in the demo page’s head tag.
