We recently posted a tutorial on how to create script-free CSS3 tooltips… Today, we’re posting a script-enhanced version that’s SEO friendly and used a little jQuery magic to make it animate itself to the mouse position!

Tooltips are used to display extra information when a link is hovered on. When we create links in our website it is always a good practice to add titles to the links for the benefit of SEO. These titles are displayed when you hover over a link but it lacks any branding or custom styling. In this tutorial I will guide you through the process of:

• Creating a tooltip shape using pure CSS3 without using any images
• Use JQuery to display the tooltip when link is hovered
• Set tooltip content to link’s title
• Animate the tooltip
• Display it relative to the mouse position

This way we will be enhancing the user experience and at the same time we keep it all nice and clean for search engines and SEO benefits.

Step 1: Adding the HTML Markup

Header Markup

Let’s start by first adding the markup inside the head of our document. We added two style sheets:
“style.css” and “tooltips.css”. You can remove the latter one when you want to implement your own work, but we’ll use it in the demo. The style sheet
“style.css” contains all the CSS styles that will format our tooltips. We’ve also added the JQuery Javascript library reference. Now here’s our document head 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>

Links with Tooltips Markup

Now we need to add the markup for the links with tooltips. In my approach to make links to display tooltips, we need to add a link with class attribute
“tooltip_link”. This will style the basic tooltip and we add an extra class name of either
“left”, “center” or “right” to specify the position of the tooltip arrow aligned to the bottom left, center or right respectively. Finally, we add some titles to the links to be displayed. Now here’s the links markup.

    <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

Now we need to determine how the tooltip markup will be so we can base our styles and coding based on it. We will use a basic
“div” tag with class attribute of “tooltip” and one of these class names
“left”, “center” or “right”. Inside it, we will place the text of the tooltip. Now here’s the tooltip markup.

    <div class="tooltip [left, centr or right]">Some tooltip text</div>

Step 2: Styling the Tooltips with CSS

First, we start by styling the link itself by setting its position to “relative” so we can position the tooltip relative to the link.

a.tooltip_link {
    position: relative !important;
}

Styling the Basic Tooltip

Now we need to add the CSS style for the basic tooltip which we’ll use the class name
“tooltip”. We need to hide the tooltip so it can be displayed using JQuery when the link is hovered, set the position to
“absolute” so we can set the position relative to the link itself, set width to
200px, a 5px padding, a bottom margin of
12px to make a space for the arrow, set text color to white, z-index to
100 to be on top of all content, 100% from the bottom, set background color to
transparent blue color with some font and text styles.

Keep in mind that you can change the styling to whatever you wish, the demo is going to use intentionally simple visual styles for the sake of simplicity.

.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;
}

Let’s add the general style for the tooltip arrow by using puesdo elements
“after” and “before”. We style the “after” puesdo element which will form the full arrow of left and right and half of the arrow in the center tooltip by setting it to have no content, absolute position, set border color the same as we used for the tooltip background with full width and
“-14px” from bottom of the tooltip. The “before” puesdo element has almost the same style as the
“after” puesdo element.

.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;
}

Styling the Left, Center and Right Arrow Tooltips

To style the tooltip with left arrow we use “left” class we style the class with a border radius from all corners except the one on the bottom left, then we style the left border and the position from the far left for the “after” puesdo element. For the right arrow we just change the border radius and set the right border and position it from the right. The center arrow tooltip we will set border radius to all corners, now here we need to style both the
“after” and “before” puesdo elements. The
“after” puesdo element has a left border with 50% of the width and
50% from the left, the “before” puesdo element has a right border and transparent bottom border, with
50% of the width and 50% from the right.

.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%;
}

Step 3: Displaying, Animating and Placing Content using JQuery

In order to get the desired functionality we need to add our JQuery code inside a script tag before the closing body tag. We will be using mouse events to determine the functionality we want to create.

On Mouse Enter Event

The “mouseenter” event fires when the mouse cursor enters any part of the element in question which is in this case the
“a” or link element, this will work only when the link has more than zero character in the title attribute. Here we need to do the following:

1. Get the class name attribute part which will determine the look of the tooltip (left, center or right arrow).
2. Get the mouse cursor X position relative to the link not the page.
3. Get the “title” attribute to be displayed inside the tooltip.
4. Append the markup of the tooltip. We will then add class name and title we got before.
5. Set tooltip position from the left depending on the tooltip class name (left, center or right arrow).
6. Finally, we will display the tooltip by using fade in animation which will set the tooltip display property to
   “block” and use animation duration of 300 milli seconds.

    $("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
        }
    });

On Mouse Leave Event

The “mouseleave” event fires when the mouse cursor leaves the the
“a” or link element. In this attribute we will simply reverse everything we’ve done in
“mouseenter” event. We will get the class name attribute part from the link, then we will fade out the the tooltip which will set the display property to
“none” and use animation duration of 300ms, then we will have to delay the next functions for
300ms until the fade out animation is ended. Now to remove the tooltip markup we need to put it inside a custom queue and then we need to end our queue by using
“dequeue” function which allows the main queue to keep going.

    $("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();
        });
    });

Conclusion

Now your final result should look like the image below. For your end result to look exactly like our demo you should use the styles inside
“tut.css”, but feel free to add your own adjustments.

I hope that you have all learned some techniques from our CSS and JQuery tutorial! Share your thoughts below :)