Tool Tip //JavaScript Repository


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


Code (Download)

//+ Jonas Raoni Soares Silva
//@ [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; = 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">
        padding: 15px;
        margin-left: 25px;
        border: 2px dashed #900;
        background-color: #fee;
        font: 8pt verdana;
        padding: 20px;
        margin-left: 25px;
        border: 1px solid #999;
        background-color: #efe;
        font: 12pt georgia, verdana;
        font-weight: bold;
        border: 3px solid #ccc;
        width: 300px;
        background: #eef;
<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).

<script type="text/javascript">

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

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




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


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.


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

Rank (Votes: 55)