You can add tooltip to the images using the attribute title, which displays a simple non-configurable tooltip.
Like :
<img src="myImage.jpg" mce_src="myImage.jpg" mce_src="myImage.jpg"
mce_src="myImage.jpg" title="this is tooltip">
but, you can also define your advanced Cool tooltip using the CSS, HTML and JavaScript.
Cool Tooltip
CSS
Make a CSS file (mycss.css) and define this CSS class :
.xstooltip
{
visibility: hidden;
top: 0;
left: 0;
font: normal 8pt sans-serif;
padding: 3px;
border: solid 1px;
background-repeat: repeat;
background-color: orange;
}
HTML and Javascript
Link CSS file to HTML inside HEAD section :
<head>
<link rel="stylesheet" href="mycss.css" mce_href="mycss.css">
Add Javascript also in the HEAD section :
<script>
function xstooltip_findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function xstooltip_findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
function xstooltip_show(tooltipId, parentId, posX, posY) {
it = document.getElementById(tooltipId);
if ((it.style.top == '' || it.style.top == 0)
&& (it.style.left == '' || it.style.left == 0)) {
// need to fix default size (MSIE problem)
it.style.width = it.offsetWidth + 'px';
it.style.height = it.offsetHeight + 'px';
img = document.getElementById(parentId);
// if tooltip is too wide, shift left to be within parent
if (posX + it.offsetWidth > img.offsetWidth)
posX = img.offsetWidth - it.offsetWidth;
if (posX < 0 )
posX = 0;
x = xstooltip_findPosX(img) + posX;
y = xstooltip_findPosY(img) + posY;
it.style.top = y + 'px';
it.style.left = x + 'px';
}
it.style.visibility = 'visible';
}
function xstooltip_hide(id) {
it = document.getElementById(id);
it.style.visibility = 'hidden';
}
</script>
</head>
Add a tooltip DIV
<div id="tooltip_123" class="xstooltip">
Time spent: 00:00:08<br/>
Page viewed: 4<br/>
Location: Loopback <img src='flags/x0.gif' /><br/>
Browser: Mozilla – 1.7.11<br/>
Operating system: Linux - i686 (x86_64)
</div>
Apply tooltip on any element like: image
<img id="the_image"
....
onmouseover="xstooltip_show('tooltip_123', 'the_image', 289, 49);"
onmouseout="xstooltip_hide('tooltip_123');"
/>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.