View Full Version : Tooltip width and frame trouble

07-15-2008, 11:28 AM
1) Script Title:
Cool DHTM Tooltip II

2) Script URL (on DD):

3) Describe problem:

I have quite a long description in one of my tooltips and have been trying with no luck to change the width of my tooltip box. I tried playing with the width in the code below

position: absolute;
left: -300px;
width: 1000px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;

but nothing is changing.

Also, my site (inherited has a very strange frame layout) it's at lmsalpha (co.uk) and I think that it is messing with the tooltip settings. At some points on the page, when I hover over the tooltip, it just presents itself above the text and half the description is missing. Is there anything I can do?

07-15-2008, 11:58 AM
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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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;
<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
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"
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
<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>

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
Mozilla Firefox

07-15-2008, 01:34 PM
For dealing with issues where content in one frame is desired to be visible where it may cross over the frame border of another frame, see:


07-15-2008, 02:09 PM
Thanks for those....

i'm not too sure about the frame code though....is there no way of inserting code to tell it that the edge of the browser is actually nearer to the text?