Create Linked
Tooltips Using CSS3 and jQuery
I’ve come across this neat tutorial that teaches you how to
create nice-looking linked tooltips using CSS3 and a little bit of jQuery tutorials for the masses and 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"
class="tooltip_link left">Tooltip left</a>
<a
href="#" title="Tooltip with center arrow"
class="tooltip_link center">Tooltip center</a>
<a
href="#" title="Tooltip with right arrow"
class="tooltip_link right">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
class="tooltip [left, center or right]">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
class="tooltip ' + $class_name + '">' + $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 here first if you prefer,
before doing the tutorial.
So there you have it! Enjoy tinkering with the CSS to suit
your style preferences.
No comments:
Post a Comment