Hunter
June 27th, 2010, 05:46 PM
Tooltip Script - Version 1.5
Code on this page: http://martynleeball.x10hosting.com/development/tooltipv2.htm
Changes:
- Images can be displayed in tooltips.
ToolTip Script - Version 0.4
Hey, just written a JavaScript script which adds a tooltip above an element. Pretty customizable and simple really. I am no expert in JavaScript so its nothing amazing.
Tested in : Firefox/3.6.6 | Internet Explorer 8.0.7600.16385 64 bit | Google Chrome
To change the tooltip text you simply add an alt tag to the element.
To add a style to the tooltip simply create a css element called ".tooltip_style".
Example:http://martynleeball.x10hosting.com/tooltip_04.htm
Pretty easy to implant as well, just add the javascript between the head tags:
<script type="text/javascript">
//########################################\\
//Tooltip script, written by Martyn Lee Ball\\
//###############Version 0.4##################\\
//This is the name of the style for the tooltip
//The style for the container of this will be the same as this but with _wrapper added on
var s_class = 'tooltip_style';
//This is the height in pixals which the tooltip is raised from the image, in addition to the txt height below (txt_tip_height)
var img_tip_height = 8;
//This is the amount of pixals which the tooltip will be raised from the element
var txt_tip_height = 23;
//This is the ID which will be given to the newly created div, ie: tooltip_container
var div_id = 'tooltip'
//This is the id of the div container which the tooltip's will be created in
var tooltip_container = 'tooltip_container';
function obj_position(obj,id) {
//Setup variables to hold position values
var x = 0;
var y = 0;
while (obj.offsetParent !== null) {
//Get position values and put in variables
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
}
//Get alt content for tooltip
var alt_message = document.getElementById(id).getAttribute('alt');
//Create array containing data
var data=new Array(x,y,alt_message);
return data;
}
function display_tooltip(obj) {
if (obj.getAttribute('tooltip') == "true") {
//Get the elementID first
var elmID = obj.id;
//First of all get the position data for current element
//Also get the message to be displayed- contained in the alt
var data = obj_position(obj,elmID);
//Create variables for the parts
var left_pos = data[0];
var top_pos = data[1] - txt_tip_height;
var message = data[2];
//Give a bit more space if its an image
(obj.tagName == 'IMG') ? top_pos = top_pos - img_tip_height : top_pos ;
var container = document.getElementById(tooltip_container);
var newdiv = document.createElement('div');
newdiv.setAttribute('id',div_id);
newdiv.className = s_class + "_wrapper";
newdiv.innerHTML = "<div class=\""+s_class+"\">" + message + "</div>";
//Position div
newdiv.style.position="absolute";
newdiv.style.top=top_pos+"px";
newdiv.style.left=left_pos+"px";
//Append newly created div to container
container.appendChild(newdiv);
}
}
function delete_tooltip() {
var container = document.getElementById(tooltip_container);
var old_div = document.getElementById(div_id);
container.removeChild(old_div);
}
</script>
And for the HTML you will need to copy and paste this div at the bottom of the page, just before the[/body] tag:
<div id="tooltip_container"><!-- Do not add content, JavaScript constantly adds and removes data. --></div>
And now to setup your element to have the tooltip to display above just simply mimic the below:
<a href="#" onMouseOver="display_tooltip(this)" onMouseOut="delete_tooltip()" alt="Tool Tip Content" id="here">Testing</a>
Key requirements in-order for script to work:
div with ID of "tooltip_container".
Mouseover/out events: onMouseOver="display_tooltip(this)" onMouseOut="delete_tooltip()".
Element which you want the tooltip to appear above MUST have an id.
Future versions may have the ability to:
No need for mouseover/out events.
Disable tooltips on elements by adding tag: "<img src="img" tooltip="true"/>".
Have thumbnail sized images in tooltips.
can anyone think of any other features?
ToolTip Script - Version 1.0 (beta)
ChangeLog:
No need for inline events, such as onMouseover and onMouseout.
Only images are currently supported to have tooltip, need to figure out how to have other elements as well.
Tooltips now fade in both IE and FireFox (Look better in FF of course).
Example page:
http://martynleeball.x10hosting.com/development/tooltip.htm
Facts:
MUST have the following tags in image: "tooltip="true" alt="your message here" id="any random id" .
The ID is a MUST have otherwise the tooltip cannt be created.
Tooltip's can be displayed on any element which has an ID, add the elements tagName in the scanE array.
And other course you MUST have text in the alt, otherwise blank tooltip :/
JavaScript:
<script type="text/javascript">
/*
Title: Tool Tip
Auther: Martyn Lee Ball
Credits:
- codingforums.com: Old_Pedant
*/
//Listen elements which can display a tooltip
var scanE = Array("img","a","div");
function attachTooltips() {
for ( j = 0; j < scanE.length; j++ ) {
var objs = document.getElementsByTagName(scanE[j]);
for ( var i = 0; i < objs.length; ++i ) {
var elm = objs [ i ];
if ( elm.getAttribute ( 'tooltip' ) == "true" ) {
elm.onmouseover = function() { display_tooltip(this); };
elm.onmouseout = function() { delete_tooltip(this); };
}
}
}
}
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};
addEvent ( window, "load", attachTooltips );
//This is the name of the style for the tooltip
//The style for the container of this will be the same as this but with _wrapper added on
var s_class = 'tooltip_style';
//This is the height in pixals which the tooltip is raised from the image
var img_tip_height = 5;
//This is the id of the div container which the tooltip's will be created in
var tooltip_container = 'tooltip_container';
function display_tooltip(obj) {
//First of all get the position data for current element
//Also get the message to be displayed- contained in the alt
var data = obj_position(obj);
//Get the position of the element which has been rolled over
var left_pos = data[0];
var top_pos = data[1];
var message = data[2];
var container = document.getElementById(tooltip_container);
var newdiv = document.createElement('div');
newdiv.setAttribute('id',left_pos + "." + top_pos);
newdiv.className = s_class + "_wrapper";
newdiv.innerHTML = "<div class=\""+s_class+"\">" + message + "</div>";
//Position div
newdiv.style.position="absolute";
newdiv.style.top=top_pos+"px";
newdiv.style.left=left_pos+"px";
newdiv.style.opacity=1;
//Append newly created div to container
container.appendChild(newdiv);
}
function obj_position(obj) {
//Setup variables to hold position values
var x = 0;
var y = 0;
var id = obj.id;
//Give a bit more space if its an image
if ( obj.tagName == "IMG" ) { y = y - img_tip_height; }
while (obj.offsetParent !== null) {
//Get position values and put in variables
x += obj.offsetLeft;
y += obj.offsetTop - 23;
obj = obj.offsetParent;
}
//Get alt content for tooltip
var alt_message = document.getElementById(id).getAttribute('alt');
//Create array containing data
var data=new Array(x,y,alt_message);
return data;
}
// Values for fading
var fadeBy = 10; //Amount to fade by
var fadeTime = 30; //Time in milliseconds to fade.
var ie_counter = 100; //Counter for crappy IE.
function delete_tooltip(obj) {
//Get the ID of the tooltip container
var data = obj_position(obj);
//ID of tooltip which is being faded
var xy_id = data[0] + "." + data[1];
fade( xy_id )
}
function fade( theID ) {
var div = document.getElementById(theID);
//Object details
var opacity = div.style.opacity * 100 - fadeBy; //Fade (FF)
ie_counter = ie_counter - fadeBy;
var opacity_ie = div.style.filter = "alpha(opacity=" + ie_counter + ")"; //Fade (IE)
if ( opacity <= fadeBy ) opacity = 0; if ( ie_counter <= fadeBy ) ie_couner = 0;
div.style.opacity = opacity / 100;
if ( opacity == 0 || ie_counter == 0 )
{
document.getElementById(tooltip_container).removeC hild(div);
ie_counter = 100; //Reset counter for crappy IE
return;
}
setTimeout( "fade('" + theID + "')", fadeTime );
}
</script>
Example HTML:
<img src="images/katie edgell_thumb.jpg" tooltip="true" alt="Katie Edgell" id="1">
<img src="images/camilla-belle_thumb.jpg" tooltip="true" alt="Camilla Belle" id="2">
<img src="images/emmawatson_thumb.jpg" tooltip="true" alt="Emma Watson" id="3">
<img src="images/jo_me_thumb.jpg" tooltip="true" alt="Martyn and Joanne" id="7">
<img src="images/emmastone_thumb.jpg" tooltip="true" alt="Emma Stone" id="6">
And the CSS I'm using:
img {
margin:0.2em;
width:100px;
border-style:solid;
border-width:2px;
border-color:#333333;
opacity:1;
}
.tooltip_style {
background-color:1A1A1A;
padding:4px;
color:#FFFFFF;
font-family:Calibri;
font-size:12px;
-moz-border-radius: 5px
}
.tooltip_style_wrapper {
background-image:url(images/arrow_down2.png);
background-position:left bottom;
padding:0px 0px 4px;
background-repeat:no-repeat;
z-index:10;
}
Link to the arrow: http://martynleeball.x10hosting.com/images/arrow_down2.png
Code on this page: http://martynleeball.x10hosting.com/development/tooltipv2.htm
Changes:
- Images can be displayed in tooltips.
ToolTip Script - Version 0.4
Hey, just written a JavaScript script which adds a tooltip above an element. Pretty customizable and simple really. I am no expert in JavaScript so its nothing amazing.
Tested in : Firefox/3.6.6 | Internet Explorer 8.0.7600.16385 64 bit | Google Chrome
To change the tooltip text you simply add an alt tag to the element.
To add a style to the tooltip simply create a css element called ".tooltip_style".
Example:http://martynleeball.x10hosting.com/tooltip_04.htm
Pretty easy to implant as well, just add the javascript between the head tags:
<script type="text/javascript">
//########################################\\
//Tooltip script, written by Martyn Lee Ball\\
//###############Version 0.4##################\\
//This is the name of the style for the tooltip
//The style for the container of this will be the same as this but with _wrapper added on
var s_class = 'tooltip_style';
//This is the height in pixals which the tooltip is raised from the image, in addition to the txt height below (txt_tip_height)
var img_tip_height = 8;
//This is the amount of pixals which the tooltip will be raised from the element
var txt_tip_height = 23;
//This is the ID which will be given to the newly created div, ie: tooltip_container
var div_id = 'tooltip'
//This is the id of the div container which the tooltip's will be created in
var tooltip_container = 'tooltip_container';
function obj_position(obj,id) {
//Setup variables to hold position values
var x = 0;
var y = 0;
while (obj.offsetParent !== null) {
//Get position values and put in variables
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
}
//Get alt content for tooltip
var alt_message = document.getElementById(id).getAttribute('alt');
//Create array containing data
var data=new Array(x,y,alt_message);
return data;
}
function display_tooltip(obj) {
if (obj.getAttribute('tooltip') == "true") {
//Get the elementID first
var elmID = obj.id;
//First of all get the position data for current element
//Also get the message to be displayed- contained in the alt
var data = obj_position(obj,elmID);
//Create variables for the parts
var left_pos = data[0];
var top_pos = data[1] - txt_tip_height;
var message = data[2];
//Give a bit more space if its an image
(obj.tagName == 'IMG') ? top_pos = top_pos - img_tip_height : top_pos ;
var container = document.getElementById(tooltip_container);
var newdiv = document.createElement('div');
newdiv.setAttribute('id',div_id);
newdiv.className = s_class + "_wrapper";
newdiv.innerHTML = "<div class=\""+s_class+"\">" + message + "</div>";
//Position div
newdiv.style.position="absolute";
newdiv.style.top=top_pos+"px";
newdiv.style.left=left_pos+"px";
//Append newly created div to container
container.appendChild(newdiv);
}
}
function delete_tooltip() {
var container = document.getElementById(tooltip_container);
var old_div = document.getElementById(div_id);
container.removeChild(old_div);
}
</script>
And for the HTML you will need to copy and paste this div at the bottom of the page, just before the[/body] tag:
<div id="tooltip_container"><!-- Do not add content, JavaScript constantly adds and removes data. --></div>
And now to setup your element to have the tooltip to display above just simply mimic the below:
<a href="#" onMouseOver="display_tooltip(this)" onMouseOut="delete_tooltip()" alt="Tool Tip Content" id="here">Testing</a>
Key requirements in-order for script to work:
div with ID of "tooltip_container".
Mouseover/out events: onMouseOver="display_tooltip(this)" onMouseOut="delete_tooltip()".
Element which you want the tooltip to appear above MUST have an id.
Future versions may have the ability to:
No need for mouseover/out events.
Disable tooltips on elements by adding tag: "<img src="img" tooltip="true"/>".
Have thumbnail sized images in tooltips.
can anyone think of any other features?
ToolTip Script - Version 1.0 (beta)
ChangeLog:
No need for inline events, such as onMouseover and onMouseout.
Only images are currently supported to have tooltip, need to figure out how to have other elements as well.
Tooltips now fade in both IE and FireFox (Look better in FF of course).
Example page:
http://martynleeball.x10hosting.com/development/tooltip.htm
Facts:
MUST have the following tags in image: "tooltip="true" alt="your message here" id="any random id" .
The ID is a MUST have otherwise the tooltip cannt be created.
Tooltip's can be displayed on any element which has an ID, add the elements tagName in the scanE array.
And other course you MUST have text in the alt, otherwise blank tooltip :/
JavaScript:
<script type="text/javascript">
/*
Title: Tool Tip
Auther: Martyn Lee Ball
Credits:
- codingforums.com: Old_Pedant
*/
//Listen elements which can display a tooltip
var scanE = Array("img","a","div");
function attachTooltips() {
for ( j = 0; j < scanE.length; j++ ) {
var objs = document.getElementsByTagName(scanE[j]);
for ( var i = 0; i < objs.length; ++i ) {
var elm = objs [ i ];
if ( elm.getAttribute ( 'tooltip' ) == "true" ) {
elm.onmouseover = function() { display_tooltip(this); };
elm.onmouseout = function() { delete_tooltip(this); };
}
}
}
}
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};
addEvent ( window, "load", attachTooltips );
//This is the name of the style for the tooltip
//The style for the container of this will be the same as this but with _wrapper added on
var s_class = 'tooltip_style';
//This is the height in pixals which the tooltip is raised from the image
var img_tip_height = 5;
//This is the id of the div container which the tooltip's will be created in
var tooltip_container = 'tooltip_container';
function display_tooltip(obj) {
//First of all get the position data for current element
//Also get the message to be displayed- contained in the alt
var data = obj_position(obj);
//Get the position of the element which has been rolled over
var left_pos = data[0];
var top_pos = data[1];
var message = data[2];
var container = document.getElementById(tooltip_container);
var newdiv = document.createElement('div');
newdiv.setAttribute('id',left_pos + "." + top_pos);
newdiv.className = s_class + "_wrapper";
newdiv.innerHTML = "<div class=\""+s_class+"\">" + message + "</div>";
//Position div
newdiv.style.position="absolute";
newdiv.style.top=top_pos+"px";
newdiv.style.left=left_pos+"px";
newdiv.style.opacity=1;
//Append newly created div to container
container.appendChild(newdiv);
}
function obj_position(obj) {
//Setup variables to hold position values
var x = 0;
var y = 0;
var id = obj.id;
//Give a bit more space if its an image
if ( obj.tagName == "IMG" ) { y = y - img_tip_height; }
while (obj.offsetParent !== null) {
//Get position values and put in variables
x += obj.offsetLeft;
y += obj.offsetTop - 23;
obj = obj.offsetParent;
}
//Get alt content for tooltip
var alt_message = document.getElementById(id).getAttribute('alt');
//Create array containing data
var data=new Array(x,y,alt_message);
return data;
}
// Values for fading
var fadeBy = 10; //Amount to fade by
var fadeTime = 30; //Time in milliseconds to fade.
var ie_counter = 100; //Counter for crappy IE.
function delete_tooltip(obj) {
//Get the ID of the tooltip container
var data = obj_position(obj);
//ID of tooltip which is being faded
var xy_id = data[0] + "." + data[1];
fade( xy_id )
}
function fade( theID ) {
var div = document.getElementById(theID);
//Object details
var opacity = div.style.opacity * 100 - fadeBy; //Fade (FF)
ie_counter = ie_counter - fadeBy;
var opacity_ie = div.style.filter = "alpha(opacity=" + ie_counter + ")"; //Fade (IE)
if ( opacity <= fadeBy ) opacity = 0; if ( ie_counter <= fadeBy ) ie_couner = 0;
div.style.opacity = opacity / 100;
if ( opacity == 0 || ie_counter == 0 )
{
document.getElementById(tooltip_container).removeC hild(div);
ie_counter = 100; //Reset counter for crappy IE
return;
}
setTimeout( "fade('" + theID + "')", fadeTime );
}
</script>
Example HTML:
<img src="images/katie edgell_thumb.jpg" tooltip="true" alt="Katie Edgell" id="1">
<img src="images/camilla-belle_thumb.jpg" tooltip="true" alt="Camilla Belle" id="2">
<img src="images/emmawatson_thumb.jpg" tooltip="true" alt="Emma Watson" id="3">
<img src="images/jo_me_thumb.jpg" tooltip="true" alt="Martyn and Joanne" id="7">
<img src="images/emmastone_thumb.jpg" tooltip="true" alt="Emma Stone" id="6">
And the CSS I'm using:
img {
margin:0.2em;
width:100px;
border-style:solid;
border-width:2px;
border-color:#333333;
opacity:1;
}
.tooltip_style {
background-color:1A1A1A;
padding:4px;
color:#FFFFFF;
font-family:Calibri;
font-size:12px;
-moz-border-radius: 5px
}
.tooltip_style_wrapper {
background-image:url(images/arrow_down2.png);
background-position:left bottom;
padding:0px 0px 4px;
background-repeat:no-repeat;
z-index:10;
}
Link to the arrow: http://martynleeball.x10hosting.com/images/arrow_down2.png