Tool Tip //JavaScript Repository

Description

Displays a tooltip when the mouse is over an element.
Created: 2005.08.07 - Modified 2005.11.28

Dependencies

Code (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/dhtml/tooltip [rev. #2]

ToolTip = function(o, t, c, f){
    var i, $ = this;
    $.s = ($.o = document.createElement("div")).style;
    $.s.display = "none", $.s.position = "absolute", $.o.className = c, $.t = t, $.f = f;
    for(i in {mouseout: 0, mouseover: 0, mousemove: 0})
        addEvent(o, i, function(e){$[e.type](e);});
};
with({p: ToolTip.prototype}){
    p.update = function(e){
        var w = window, b = document.body;
        this.s.top = e.clientY + (w.scrollY || b.scrollTop || b.parentNode.scrollTop || 0) + "px",
        this.s.left = e.clientX + (w.scrollX || b.scrollLeft || b.parentNode.scrollLeft || 0) + "px";
    }
    p.mouseout = function(){
        this.s.display = "none";
    };
    p.mouseover = function(e){
        document.body.appendChild(this.o).innerHTML = this.t,
        e.stopPropagation(), this.update(e), this.s.display = "block";
    };
    p.mousemove = function(e){
        this.f && this.update(e);
    };
    p.setContent = function(s){
        this.o.innerHTML = this.t = s;
    };
}

Example (Example)

<style type="text/css">
    .RED{
        padding: 15px;
        margin-left: 25px;
        border: 2px dashed #900;
        background-color: #fee;
        font: 8pt verdana;
    }
    .GREEN{
        padding: 20px;
        margin-left: 25px;
        border: 1px solid #999;
        background-color: #efe;
        font: 12pt georgia, verdana;
        font-weight: bold;
    }
    .box{
        border: 3px solid #ccc;
        width: 300px;
        background: #eef;
    }
</style>
<div id="a" class="box">
    Tooltip verde est?tico contendo a data atual atualizada a cada segundo.
    <br />Green static tooltip containing the current timestamp updated every second.
</div><br />
<div id="b" class="box">
    Tooltip vermelho m?vel (a caixa segue o mouse).
    <br />Movable red tooltip (the box follows the mouse).
</div>


<script type="text/javascript">
//<![CDATA[

var t = new ToolTip(document.getElementById("b"), "primeira linha<br /><b>segunda linha</b>", "RED", true);
var t2 = new ToolTip(document.getElementById("a"), "", "GREEN");

setInterval((function(){
    t2.setContent((new Date).toLocaleString());
    return arguments.callee;
})(), 1000);


//]]>
</script>

Help

Constructor

ToolTip(element: HTMLElement, text: String, className: String, [followMouse: Boolean = false])
Adds tooltip for an element.
element
element that will be linked with the tooltip
text
text or html that will shown in the tooltip
className
CSS classname that will be used by the tooltip
followMouse
specifies if the tooltip window must follow the mouse or stay fixed in the first place where it appeared

Properties

ToolTip.o: HTMLElement
Reference to the ToolTip element.
ToolTip.t: String
Text/HTML that will be shown.
ToolTip.f: Boolean
Specifies if the tooltip window should follow the mouse.

Methods

ToolTip.setContent(content: String): void
Changes the content shown by the tooltip.
content
new content

Rank (Votes: 55)

4.13