Monday, January 16, 2012

Create Linked Tooltips Using CSS3 and jQuery


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