Tool Tip //JavaScript Repository
Description
Displays a tooltip when the mouse is over an element.
Created: 2005.08.07 - Modified 2005.11.28
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: 57)
4.07