Create Linked Tooltips Using CSS3 and jQuery
I’ve come across this neat tutorial on how to create nice-looking linked tooltips using CSS3 and a little bit of jQuery for that cool fade in/out effect. Below is a screenshot of what the tooltips in the tutorial look like:
There are 3 variations of the balloons’ arrows, wherein they can point left, center, or right.
Before we head off to the CSS and jQuery part of the tutorial, of course we first need to prep up our HTML page with this document head markup.
HTML Markup
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Link Tooltips Using CSS3 and JQuery</title>
<link rel="stylesheet" href="styles/tut.css" />
<link rel="stylesheet" href="styles/tooltips.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
This tutorial uses 2 external style sheets (tut.css and tooltips.css) so if you’ve noticed, we have 2 of them indicated above. You can exclude the former (tut.css) if you wish, because this only contains the code to style the page’s look (i.e. font, etc.).
Links with Tooltips Markup
Below will be the markup for the links with the tooltips. The approach used in this tutorial to display the tooltips is to add a link with the class attribute “tooltip_link”, which will style the basic tooltip by adding a class name to specify the tooltip’s position (i.e. left, center, or right). A respective title for each is also included:
<a href="#" title="Tooltip with left arrow" >Tooltip left</a>
<a href="#" title="Tooltip with center arrow" >Tooltip center</a>
<a href="#" title="Tooltip with right arrow" >Tooltip right</a>
|
Tooltips Markup
In this part, we’re going to determine how the tooltip markup will be so we can base our styles and coding on it. Here we have the basic <div> tag with the class attribute “tooltip” and a class name which can either be “left”, “center”, or “right”. Inside it will be the text of the tooltip.
<div >Some tooltip text</div>
|
Now we will put some style on the tooltips using CSS.
CSS
a.tooltip_link {
position: relative !important;
}
.tooltip {
display: none;
position: absolute !important;
width: 200px;
background: rgba(61,102,143,0.9);
padding: 5px;
margin: 0 0 12px 0;
color: #fff;
z-index: 100;
bottom: 100%;
text-align: center;
font-weight: bold;
font-size: 11px;
}
.tooltip:after {
content: "";
position: absolute !important;
bottom: -14px;
z-index: 100;
border: 0 solid rgba(61,102,143,0.9);
border-bottom: 14px solid transparent;
width: 100%;
}
.tooltip:before {
content: "";
position: absolute !important;
border: 0 solid rgba(61,102,143,0.9);
bottom: -14px;
z-index: 100;
}
.tooltip.left {
border-radius: 5px 5px 5px 0;
}
.tooltip.left:after {
border-left-width: 14px;
left: 0;
}
.tooltip.right {
border-radius: 5px 5px 0 5px;
}
.tooltip.right:after {
border-right-width: 14px;
right: 0;
}
.tooltip.center {
border-radius: 5px;
}
.tooltip.center:after {
border-left-width: 10px;
width: 50%;
left: 50%;
}
.tooltip.center:before {
border-right-width: 10px;
border-bottom: 14px solid transparent;
width: 50%;
right: 50%;
}
|
Next is the necessary jQuery code to place the content into the tooltips and to display and animate it. You have to paste this code before the closing body tag.
jQuery
<script type="text/javascript">
$("a").mouseenter(function (e) { //event fired when mouse cursor enters "a" element
var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element
var $tooltip_text = $(this).attr("title"); //get title attribute of "a" element
if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters
$(this).append('<div >' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above
$("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left
$("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left
$("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left
$("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip
}
});
$("a").mouseleave(function () { //event fired when mouse cursor leaves "a" element
var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
//fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue
$("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function () {
$(this).remove();
$(this).dequeue();
});
});
</script>
|
As mentioned earlier, there are 2 CSS files used for this tutorial, so if you want to have the exact same look as the sample in the image shown at the top, you may download the needed [separate] CSS file here (tut.css). You may also check out the demo first if you prefer, before doing the tutorial.
So there you have it! Enjoy tinkering with the CSS to suit your style preferences.
0
464
