Tool Tip //JavaScript Repository

Description

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

Dependencies

General » Manipulador de Eventos

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

JSFromHell.com