The width of the tooltip can be changed as you've mentioned. Below you can find an example for the same in which I've used a width of 1000px for the tooltip with a very lengthy tooltip message.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#dhtmltooltip {
position: absolute;
left: -300px;
width: 1000px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid: DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer {
position: absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetfromcursorX = 12 //Customize x offset of tooltip
var offsetfromcursorY = 10 //Customize y offset of tooltip
var offsetdivfrompointerX = 10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY = 14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image
var ie = document.all
var ns6 = document.getElementById && !document.all
var enabletip = false
if (ie || ns6)
var tipobj = document.all ? document.all["dhtmltooltip"] : document.getElementById ? document.getElementById("dhtmltooltip") : ""
var pointerobj = document.all ? document.all["dhtmlpointer"] : document.getElementById ? document.getElementById("dhtmlpointer") : ""
function ietruebody(){
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6 || ie) {
if (typeof thewidth != "undefined")
tipobj.style.width = thewidth + "px"
if (typeof thecolor != "undefined" && thecolor != "")
tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return false
}
}
function positiontip(e){
if (enabletip) {
var nondefaultpos = false
var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20
var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20
var rightedge = ie && !window.opera ? winwidth - event.clientX - offsetfromcursorX : winwidth - e.clientX - offsetfromcursorX
var bottomedge = ie && !window.opera ? winheight - event.clientY - offsetfromcursorY : winheight - e.clientY - offsetfromcursorY
var leftedge = (offsetfromcursorX < 0) ? offsetfromcursorX * (-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge < tipobj.offsetWidth) {
//move the horizontal position of the menu to the left by it's width
tipobj.style.left = curX - tipobj.offsetWidth + "px"
nondefaultpos = true
}
else
if (curX < leftedge)
tipobj.style.left = "5px"
else {
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left = curX + offsetfromcursorX - offsetdivfrompointerX + "px"
pointerobj.style.left = curX + offsetfromcursorX + "px"
}
//same concept with the vertical position
if (bottomedge < tipobj.offsetHeight) {
tipobj.style.top = curY - tipobj.offsetHeight - offsetfromcursorY + "px"
nondefaultpos = true
}
else {
tipobj.style.top = curY + offsetfromcursorY + offsetdivfrompointerY + "px"
pointerobj.style.top = curY + offsetfromcursorY + "px"
}
tipobj.style.visibility = "visible"
if (!nondefaultpos)
pointerobj.style.visibility = "visible"
else
pointerobj.style.visibility = "hidden"
}
}
function hideddrivetip(){
if (ns6 || ie) {
enabletip = false
tipobj.style.visibility = "hidden"
pointerobj.style.visibility = "hidden"
tipobj.style.left = "-1000px"
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
</script>
</head>
<body>
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Vestibulum a libero hendrerit nulla aliquet luctus. Morbi aliquet. Nam nulla nunc, luctus in, vestibulum quis; sollicitudin ut, leo. Fusce vitae erat. Sed tincidunt rhoncus odio. Nam nulla risus, hendrerit eu, tempus eget; ornare eu, magna. Aenean eleifend neque eget sapien. Sed hendrerit orci vel pede! Pellentesque nec justo? Nullam ipsum. Integer eros. Ut elementum lorem vel nisl. Nulla ultricies lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris pede? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum et massa. Sed facilisis eleifend neque. ')";
onMouseout="hideddrivetip()">Search Engine</a>
</body>
</html>
The site you've mentioned in your post seems to be not online at the moment. To view the above code correctly save the tooltip image from the script page in the same folder of the above code.
I've checked the above code in the following browsers:
MSIE 5.5
MSIE 6
MSIE 7
Mozilla Firefox 2.0.0.15
Tooltip width and frame trouble
Reply With Quote
Bookmarks