How to Create Tooltips for Images With CSS & JavaScript
- 1). Launch "Notepad" or another HTML editor. Open an HTML document.
- 2). Place the following HTML code anywhere in the document's "body" section:
<img id = "Image1" src="xyz.jpg" />
<div>
</div>
This code adds an image to the Web page. The image's id value is "Image1" in this example. The "div" tag creates an empty div block. The code will use this div as the tooltip. The div's id value is "ToolTip." The div also references a CSS class named "tooltip." - 3). Add the following code to the document's "head" section:
<style type="text/css">
.tooltip {background-color:Yellow; color:red; height:100px; width:200px; visibility:hidden; position:absolute;}
</style>
This CSS code creates the "tooltip" CSS class. This class sets the div's styling properties. The first two properties set the background and foreground colors for the tooltip. Those colors are "yellow" and "red" in this example. Replace those colors if you wish. The height and width of the tooltip are 100 pixels and 200 pixels. Change these values as well if you want the tooltip to have different dimensions. The visibility property sets the div's visibility to hidden. This makes the div invisible when the Web page loads. The position property's value is "absolute." This allows the code to move the tooltip to any location on the screen. Do not change the visibility or position property values. - 4). Add the following JavaScript code after the CSS code described in the previous section:
<script language ="javascript" type="text/javascript">
var toolTipID = "ToolTip";
var imageID = "Image1";
var imageToolTip = "Insert Tooltip Here";
window.onload=addMouseEvents;
function addMouseEvents() {
var imageObject = document.getElementById(imageID);
imageObject.onmouseover = function () {
manageToolTip(imageObject, "SHOW", imageToolTip);
}
imageObject.onmouseout = function () {
var imageObject = document.getElementById(imageID);
manageToolTip(imageObject, "HIDE", imageToolTip);
}
}
Note that the toolTipID variable contains the id of the div. The imageID variable holds your image's ID, and the imageToolTip variable contains the text you wish to appear in the tooltip. Change that text from "Insert Tooltip Here" to the text you want to appear in the tooltip. The remaining code sets up the event handlers that cause the div to appear and disappear when your mouse cursor moves over and away from the image. - 5). Add the following JavaScript functions after the code shown in the previous step:
function manageToolTip(imageObject, action, toolTipMessage) {
var toolTipObject = document.getElementById(toolTipID);
if (action == "HIDE")
toolTipObject.style.visibility = "hidden";
else {
var imageObjectTop = findTop(imageObject);
toolTipObject.style.visibility = "visible";
toolTipObject.innerHTML = toolTipMessage;
toolTipObject.style.left = findLeft(imageObject);
toolTipObject.style.top = findTop(imageObject);
}
}
function findLeft(imageObject) {
var parentElement = imageObject.offsetParent;
var imageCurrentPosition = imageObject.offsetLeft;
while (parentElement.nodeName != "BODY") {
imageCurrentPosition += parentElement.offsetLeft;
parentElement = parentElement.offsetParent;
}
return imageCurrentPosition;
}
function findTop(imageObject) {
var parentElement = imageObject.offsetParent;
var imageCurrentPosition = imageObject.offsetTop;
while (parentElement.nodeName != "BODY") {
imageCurrentPosition += parentElement.offsetTop;
parentElement = parentElement.offsetParent;
}
return imageCurrentPosition;
}
</script>
This code runs when the mouse cursor moves over the image and away from the image. It computes the X and Y coordinates of the image and moves the tooltip div to that location. This insures that the tooltip appears over the image instead of at a random location. - 6). Save the HTML document, and open it in your browser. Move your mouse over the image. The tooltip will appear and display the text you set in the JavaScript code. Move your mouse away from the image to make the tooltip disappear.