Tool Tip //Repositório JavaScript

Descrição

Exibe tooltip ao passar o mouse em cima de um elemento.
Criado: 2005.08.07 - Modificado 2005.11.28

Dependências

General » Manipulador de Eventos

Código (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;
    };
}

Exemplo (Exemplo)

<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>

Ajuda

Construtor

ToolTip(element: HTMLElement, text: String, className: String, [followMouse: Boolean = false])

Adiciona tooltip a um elemento.

element: elemento onde o tooltip será adicionado
text: texto/html que será exibido no tooltip
className: nome da classe CSS que será usada pelo tooltip
followMouse: especifica se a janela do tooltip deve seguir o mouse ou ficar parada no primeiro lugar que ela apareceu

Propriedades

ToolTip.o: HTMLElement: Referência para o elemento do ToolTip.
ToolTip.t: String: Texto/HTML que será exibido.
ToolTip.f: Boolean: Especifica se a janela do tooltip deve seguir o mouse.

Métodos

ToolTip.setContent(content: String): void

Altera o conteúdo exibido pelo tooltip.

content: novo conteúdo

JSFromHell.com