Click here to Skip to main content
Click here to Skip to main content

ToolTip Robot

, 19 Dec 2012
Rate this:
Please Sign up or sign in to vote.
This library helps you to build and style your own tooltip simply by setting CSS properties and title property of tags

Introduction

This library helps you to build and style your own tooltip simply by setting CSS properties and title property of tags

Background

Browser supplied tooltip control is not fashionable, here is the library to help you to style your own tooltip control without the need of implementing complicated CSS or JavaScript logic.

Using the code

Simple link the ToolTipRobot.js file to your HTML file and paste two CSS classes into your html, and then simply set the title property of tags like you normally do.

Download Demo Source

CSS Classes

.toolTipBox
{
   max-height:400px;
   max-width: 500px;
   background-color: rgb(0,0,255);
   position: absolute;
   display: none;
   z-index:10000;
   border-top-left-radius: 7px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 8px;
   box-shadow:-2px 2px 7px 1px rgba(0,0,200,0.8);
   -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=-2,OffY=2,Color=#330000C8,Positive=true)";
   filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=-2,OffY=2,Color=#330000C8,Positive=true);
}
.toolTipBox .toolTipContent
{
   max-height: inherit;
   max-width: inherit;
   overflow-y: auto;
   color: white;
   padding: 5px 5px 5px 5px; 
   -ms-word-wrap: break-word;
   word-wrap:break-word;
   line-height: 1.5;
   font-size:9pt;
}

JavaScript Library:

function logMessage(text) {
    //console.log(text);
}
function debugMessage(text) {
    console.log(text);
}
var ToolTipRobot = new function () {
    var ToolTipHtml = "<div id="ToolTipBox" 
          class="toolTipBox"><div class="toolTipContent" 
          id="ToolTipContent"></div></div>";
    var ToolTipBoxSelector = 'div.toolTipBox[id="ToolTipBox"]';
    var ToolTipContentSelector = 'div.toolTipContent[id="ToolTipContent"]';
    var ToolTipAttribute = 'data-tooltip';
    var hoveredObj;
    var hideTipsTimeoutHandler;
    var mouseX;
    var mouseY;
    this.BuildToolTips = buildToolTips;
    function displayToolTip(element) {
        clearHideToolTipEvent();
        var text = element.attr(ToolTipAttribute);
        var toolTipBox = $(ToolTipBoxSelector);
        var toolTipContent = $(ToolTipContentSelector);
        toolTipBox.css('left', 0);
        toolTipBox.css('top', 0);
        toolTipContent.html(text);
        var boxHeight = toolTipBox.height();
        var boxWidth = toolTipBox.width();
        mouseX = mouseX + 10;
        mouseY = mouseY + 10;
        var left = (mouseX + boxWidth) > $(window).width() ? (mouseX - boxWidth - 20) : mouseX;
        var top = (mouseY + boxHeight) > $(window).height() ? (mouseY - boxHeight - 20) : mouseY;
        toolTipBox.css('left', left);
        toolTipBox.css('top', top);
        toolTipBox.fadeIn(200);
        logMessage('displayed');
    }
    function closeToolTip() {
        if (!hideTipsTimeoutHandler) {
            hideTipsTimeoutHandler = setTimeout(closeToolTip, 700);
            logMessage('set close timer');
            return;
        }
        var toolTipBox = $(ToolTipBoxSelector);
        toolTipBox.fadeOut(200);
        logMessage('closed');
    }
    function clearHideToolTipEvent() {
        if (hideTipsTimeoutHandler) {
            clearTimeout(hideTipsTimeoutHandler);
            hideTipsTimeoutHandler = undefined;
            logMessage('cleared close timer');
        }
    }
    function buildToolTips() {
        var bodyObj = $('body');
        bodyObj.append(ToolTipHtml);
        $(ToolTipBoxSelector).bind({ mouseenter: 
          clearHideToolTipEvent, mouseout: function () { closeToolTip(); } });
        var objs = $('[title!=""]');
        objs.each(function () {
            var obj = $(this);
            var title = obj.attr("title");
            var timeoutHandler;
            if (!title || title.length == 0)
                return;
            obj.attr("data-tooltip", title);
            obj.removeAttr("title");
            obj.bind({
                mouseenter: function (e) {
                    if (!hoveredObj || hoveredObj != obj) {
                        hoveredObj = obj;
                        clearHideToolTipEvent()
                        mouseX = e.pageX;
                        mouseY = e.pageY;
                        logMessage('Mouse: '+mouseX + ',' + mouseY);
                        timeoutHandler = setTimeout(function () {
                            displayToolTip(obj);
                        }, 700);
                        return;
                    }
                },
                mouseout: function () {
                    if (timeoutHandler) {
                        clearTimeout(timeoutHandler);
                        timeoutHandler = undefined;
                    }
                    hoveredObj = undefined;
                    closeToolTip();
                }
            });
        });
    }
}
$(document).ready(ToolTipRobot.BuildToolTips);

Points of Interest

Now you can forget about the ugly old tooltip, and start styling your own tooltip.

JavaScript is fun after all!!!

History

Version 1.0.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

xibao
Software Developer
United States United States
I code for fun, my code are free.
I code with skill, not with bible.
I hate php$ when $ is not mine.
I hate C++ because of -> pointer.
I like Java because it doesn't use -> pointer.
I like Assembly because it makes me closer to machine.
I love C#'s efficiency and power.
I love jQuery's lazy coding ways.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 19 Dec 2012
Article Copyright 2012 by xibao
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid