Entry
How can I have a styled tooltip?
Apr 25th, 2000 09:56
Martin Honnen,
Note that IE4+ (and likely final NN6) allow to use the
TITLE
attribute for every tag to provide a tooltip. For NN4 however and for
css styled tooltips use the following
<HTML>
<HEAD>
<SCRIPT>
if (document.layers)
document.write('<STYLE> .tooltipElement { position: relative; }
<\/STYLE>');
function TooltipElement (html, tooltip, useTitle, styles) {
this.content = html;
this.tooltip = tooltip;
this.useTitle = useTitle && document.all ? true : false;
this.ind = TooltipElement.cur;
this.id = 'tooltipContainer' + TooltipElement.cur++;
TooltipElement.elements[this.id] = this;
TooltipElement.elements[TooltipElement.elements.length] = this;
if (!this.useTitle) {
this.style = new Object();
this.style.fontSize = styles && styles.fontSize ? styles.fontSize :
TooltipElement.style.fontSize;
this.style.color = styles && styles.color ? styles.color :
TooltipElement.style.color;
this.style.borderColor = styles && styles.borderColor ?
styles.borderColor : TooltipElement.style.borderColor;
this.style.borderWidth = styles && styles.borderWidth ?
styles.borderWidth : TooltipElement.style.borderWidth;
this.style.borderStyle = styles && styles.borderStyle ?
styles.borderStyle : TooltipElement.style.borderStyle;
this.style.backgroundColor = styles && styles.backgroundColor ?
styles.backgroundColor : TooltipElement.style.backgroundColor;
}
function writeTooltipElement () {
var html = '';
html += '<SPAN ID="' + this.id + '"';
html += this.useTitle ? ' TITLE="' + this.tooltip + '"' : '';
html += document.layers ? ' CLASS="tooltipElement"' : '';
html += '>';
html += this.content;
html += '<\/SPAN>';
document.write(html);
}
this.writeTooltipElement = writeTooltipElement;
this.writeTooltipElement();
function hideTooltipLayer () {
if (document.layers)
this.tooltip.tooltipLayer.visibility = 'hide';
else if (document.all || document.getElementById)
this.tooltip.tooltipLayer.style.visibility = 'hidden';
}
function showTooltipLayer (evt) {
var x = evt ? evt.pageX : event.x;
var y = evt ? evt.pageY : event.y;
var tipEl = this.tooltip;
if (document.layers) {
tipEl.tooltipLayer.left = x;
tipEl.tooltipLayer.top = y;
tipEl.tooltipLayer.visibility = 'show';
}
else if (document.all || document.getElementById) {
tipEl.tooltipLayer.style.left = x + 'px';
tipEl.tooltipLayer.style.top = y + 'px';
tipEl.tooltipLayer.style.visibility = 'visible';
}
}
function setUpTooltip () {
if (!this.useTitle) {
var html = '';
if (document.layers) {
html += '<SPAN ID="tooltip' + this.ind + '"';
html += ' STYLE="';
html += ' border-style: ' + this.style.borderStyle + ';';
html += ' border-width: ' + this.style.borderWidth + ';';
html += ' border-color: ' + this.style.borderColor + ';';
html += ' color: ' + this.style.color + ';';
html += ' font-size: ' + this.style.fontSize + ';';
html += '"';
html += '>';
html += this.tooltip;
html += '<\/SPAN>';
}
else if (document.all) {
html += '<SPAN ID="tooltip' + this.ind + '"';
html += ' STYLE="';
html += ' position: absolute; visibility: hidden;';
html += ' border-style: ' + this.style.borderStyle + ';';
html += ' border-width: ' + this.style.borderWidth + ';';
html += ' border-color: ' + this.style.borderColor + ';';
html += ' color: ' + this.style.color + ';';
html += ' font-size: ' + this.style.fontSize + ';';
html += ' background-color: ' + this.style.backgroundColor
+ ';';
html += '"';
html += '>';
html += this.tooltip;
html += '<\/SPAN>';
}
else if (document.getElementById) {
html += '<SPAN ID="tooltip' + this.ind + '"';
html += ' STYLE="';
html += ' position: absolute; visibility: hidden;';
html += '"';
html += '>';
html += '<SPAN';
html += ' STYLE="';
html += ' border-style: ' + this.style.borderStyle + ';';
html += ' border-width: ' + this.style.borderWidth + ';';
html += ' border-color: ' + this.style.borderColor + ';';
html += ' color: ' + this.style.color + ';';
html += ' font-size: ' + this.style.fontSize + ';';
html += ' background-color: ' + this.style.backgroundColor
+ ';';
html += '"';
html += '>';
html += this.tooltip;
html += '<\/SPAN>';
html += '<\/SPAN>';
}
if (document.layers) {
this.container = document[this.id];
this.ol = new Layer(this.container.clip.width);
this.ol.tooltip = this;
this.ol.zIndex = 5;
this.ol.left = this.container.pageX;
this.ol.top = this.container.pageY;
this.ol.clip.width = this.container.clip.width;
this.ol.clip.height = this.container.clip.height;
this.ol.bgColor = this.container.bgColor;
this.ol.document.open();
this.ol.document.write(this.content);
this.ol.document.close();
this.ol.visibility = 'show';
this.container.visibility = 'hide';
this.tooltipLayer = new Layer (200);
this.tooltipLayer.zIndex = 10;
this.tooltipLayer.bgColor = this.style.backgroundColor;
this.tooltipLayer.document.open();
this.tooltipLayer.document.write(html);
this.tooltipLayer.document.close();
this.ol.onmouseover = showTooltipLayer;
this.ol.onmouseout = hideTooltipLayer;
}
else if (document.all || document.getElementById) {
this.container = document.all ? document.all[this.id] :
document.getElementById(this.id);
this.container.tooltip = this;
if (document.all)
document.body.insertAdjacentHTML('beforeEnd', html);
else if (document.getElementById) {
var r = document.createRange();
r.setStartAfter(document.body.lastChild);
document.body.appendChild(r.createContextualFragment(html));
}
this.tooltipLayer = document.all ? document.all['tooltip' +
this.ind]
: document.getElementById('tooltip' +
this.ind);
this.container.onmouseover = showTooltipLayer;
this.container.onmouseout = hideTooltipLayer;
}
}
}
this.setUpTooltip = setUpTooltip;
}
TooltipElement.cur = 0;
TooltipElement.elements = new Array();
TooltipElement.style = { backgroundColor: 'lightyellow',
borderColor: 'rgb(0,0,0)',
borderWidth: '1px', borderStyle: 'solid',
color: 'rgb(0,0,0)', fontSize: '10pt' };
function initToolTipElements () {
for (var i = 0; i < TooltipElement.elements.length; i++)
TooltipElement.elements[i].setUpTooltip();
}
</SCRIPT>
<SCRIPT>
function init() {
initToolTipElements();
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
All for Kibology.
<SCRIPT>
new TooltipElement('Bonjour.', 'Good Morning.');
</SCRIPT>
Kibology for all.
<BR>
All for Kibology.
<SCRIPT>
new TooltipElement('Bonjour.', 'Good Morning.', false,
{backgroundColor: 'lime', color: 'white',
fontSize: '24pt'});
</SCRIPT>
Kibology for all.
<BR>
All for Kibology.
<SCRIPT>
new TooltipElement('Bonjour.', 'Good Morning.', true);
</SCRIPT>
Kibology for all.
<BR>
All for Kibology.
<SCRIPT>
new TooltipElement('Bonjour.', 'Good Morning.', false,
{backgroundColor: 'black', color: 'rgb(255,0,0)',
fontSize: '16pt',
borderColor: 'rgb(255,0,0)', borderWidth: '5px',
borderStyle: 'outset'});
</SCRIPT>
Kibology for all.
<BR>
<SCRIPT>
new TooltipElement('<A HREF="http://www.kibo.com">www.kibo.com<\/A>',
'Visit GOD.', false,
{backgroundColor: 'black', color: 'rgb(255,0,0)',
fontSize: '16pt',
borderColor: 'rgb(255,0,0)', borderWidth: '5px',
borderStyle: 'outset'});
</SCRIPT>
</BODY>
</HTML>
