Tooltip width and frame trouble

browser · #1 07-15-2008, 12:28 PM

1) Script Title:
Cool DHTM Tooltip II

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...mltooltip2.htm

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

#dhtmltooltip{
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?

codeexploiter · #2 07-15-2008, 12:58 PM

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

jscheuer1 · #3 07-15-2008, 02: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:

http://www.dynamicdrive.com/forums/s...ad.php?t=25009

browser · #4 07-15-2008, 03: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?

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search