Tooltip With jQuery And CSS

In this tutorial you will see how to create an animated tooltip using jQuery and CSS3. The purpose of a tooltip is to provide additional information about an element in a web page. Most of the time tooltips appear when rolling over an element which has a title attribute. Here is an example with a link (code: <a href="#" title="This is a link"> link</a> ). This works with most HTML tags apart from few exceptions.

What jQuery allows us to do is to change the look and how the tip will be displayed. Now it is time for coding.

Tooltip demo

To see the demo in action just roll-over the underlined/bold words to have an idea of how the tooltip appears.

See the Pen Tooltip With jQuery And CSS by WebTutorialSource (@webtutorialsource) on CodePen.

Note

The first thing you will need to do is download jQuery (we are using the version 1.12.4 for this tutorial). You can get it form HERE. Then add the following line of code in the <head> section of your page(change the path appropriately).

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

HTML

For this tutorial the HTML markup is very simple. A simple <span> tag with its attributes and we are done. Data is a new HTML5 attribute which allows to store…you guessed it, data. The attribute data-tip is where you will type the text you want to be appearing in the tooltip. You can even put HTML tags such as <i> for instance.

<span class="pop_tooltip" data-style="tooltip" data-tip="Your tip">Your text</span>

CSS

The following CSS will be used to style the tooltip. We will have a drop shadow for the container and the text. We are also going to add a nice gradient and transparency for the container.

.pop_tooltip { /*This is just to distinguish the elements on which the effect will be applied from the rest of the text.*/
    cursor: default;
    text-decoration: underline;
    font-weight:bold;
}

.tooltip {
    position: absolute;
    opacity: 0;
    background: #2366ff;
    color: white;
    font-weight: normal;
    padding: 8px 16px;
    border-radius: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);  
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    background: -moz-linear-gradient(top, rgba(108,172,236,1) 0%, rgba(35,102,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(108,172,236,1) 0%,rgba(35,102,255,1) 100%);
    background: -o-linear-gradient(top, rgba(108,172,236,1) 0%,rgba(35,102,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(108,172,236,1) 0%,rgba(35,102,255,1) 100%);
}

.tooltip:after {
    content: '';
    border-top: 8px solid #2366ff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    bottom: -15px;
    left: 10px;
}

JQuery

Now the HTML markup and the styling are in place, we need jQuery to make the tooltip work.

$(document).ready(function() {
    
    $('.pop_tooltip').on('mouseover', function() {
        
        tooltip = $(this);
        tooltip_text = tooltip.attr('data-tip');
        tooltip_style = tooltip.attr('data-style');
        tooltip_class = '.' + tooltip_style;
        
        tooltip.addClass('showed-tooltip').after('<span class="'+tooltip_style+'">'+tooltip_text+'</span>');

        position_top = tooltip.position().top - $(tooltip_class).outerHeight() - 10;
        position_right = tooltip.position().right;
        
        $(tooltip_class).css({ 'right': position_right, 'top': position_top }).animate({'opacity':'0.8', 'margin-left':'-30'}, 200);
        
    }).on('mouseout', function() {
        $(tooltip_class).animate({'opacity':'0', 'margin-left':'0px'}, 200, function() {
            $(this).remove();
            tooltip.removeClass('showed-tooltip');
        });
    });
});