3 steps to create a simple tooltip box

Tooltip is a message box that appears when cursor is positioned over an image, icon, link or any other HTML element. In this example mouse over on a icon and it will show tooltip showing a text message. In this tutorial I’m going to show you how to create a simple tool tip box in 3 steps. In last tutorial we learn a tricks How to create Facebook like loading animation using css3. Hope you enjoyed that.

Let’s get started –

– First step(Write HTML Scripts):

Nothing very hard or fancy. Just write simple image tag and add two new custom tag called “rel” and “content”. In content tag you add your text that you want to show when tooltip box will activate.

<img
    src="info.png"
    rel="tooltip"
    content="<span>Image Hover Tool Tips</span>
              <br/> This is an example of a image Hover tooltip with jquery"
/>

– Second step(Add simple CSS Scripts):

.tooltip {
    position: absolute;
    width: 250px;
    background-position: left center;
    background: lightslategray;
    color: #fff;
    padding: 5px 5px 5px 18px;
    font-size: 11px;
    font-family: Verdana;
    border: 2px solid lightgray;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
}
.tooltip span {
    font-weight: 12px;
    color: #ffea00;
}

Create a class for tool tip box and it will use in jQuery script. We add a nice rounded shape for tooltip box. Rounded shape support in all latest browsers.

– Third step(Add jQuery Scripts):

$(function () {
    $("[rel=tooltip]")
        .bind("mouseover", function () {
            var tip_content = $(this).attr("content");
            $("<div>" + tip_content + "</div>").appendTo("body");
            $(this).bind("mousemove", function (e) {
                $("div.tooltip").css({ top: e.pageY - $("div.tooltip").height() / 2 + 30, left: e.pageX + 15 });
            });
        })
        .bind("mouseout", function () {
            $("div.tooltip").slideUp("fast", function () {
                $(this).remove();
            });
        });
});

I’ve used a custom tag called “rel”. When you put mouse over the image then tooltip appear and on mouse out you can see nice sliding effect.

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!