Auto size for: Fixed Tooltip script and Show Hint script needed

**Null** · 02-27-2006, 02:17 PM

Hi,

I believe this request is for both scripts, cause they work in a similar way.

You can set a default width for the Tooltip;

Code:

width: 150px; (default)

but you can also set the width manualy for each tip like;

Code:

, this, event, '200px'

Well I am lazy and I dont want to set all tooltips manualy, this can be solved by leaving it empty like;

Code:

 , this, event, ''

The default width will be used now.

Well this causes a problem. Cause if I have a tip like: "Hello" The tooltip width will be 150 px, leaving a wide empty space after "Hello".

Is it possible to autosize this? Using the default width as a max width. If a shorter tip is given, the tooltip will be smaller...

Think this is possible, but I don't know how to accomplish this. Any ideas?

Thx,
Null

**Null** · 03-01-2006, 02:54 PM

Any ideas?

**jscheuer1** · 03-01-2006, 03:59 PM

Well, for the Fixed ToolTip script, set this in the configuration:

Code:

var tipwidth='' //default tooltip width

Find this line:

Code:

dropmenuobj.widthobj.width=tipwidth

Change it to:

Code:

dropmenuobj.widthobj.width=''

Use this syntax for a tip:

Code:

onMouseover="fixedtooltip('Comprehensive JavaScript tutorials and over 400+ <b>free</b> scripts.', this, event)"

However, any line breaks that you want within the tip will need to be created using the <br> tag or some other HTML convention, <br> is simplest:

Code:

onMouseover="fixedtooltip('Comprehensive JavaScript tutorials<br> and over 400+ <b>free</b> scripts.', this, event)"

**Null** · 03-01-2006, 04:08 PM

Thx for the reply, but this is not what I need. This takes away the whole default witdh and I still need to manualy fix all tooltips using brakes.

I want to autosize the tooltip. Using the default width as a max width. If a shorter tip is given, like "Hello" the tooltip will be smaller. Fitting the word.

If a lot of text is given, the tooltip will stretch to the size needed, but not wider as the default px given. If the default width is reached it will fill the tooltip as it would do normaly (so whithout giving manual brakes)

Hope it is more clear now of what i mean...

Thx
Null

**jscheuer1** · 03-01-2006, 06:01 PM

That's a bit more complex, but only because, unlike other browsers, IE does not recognize the max-width property. I used that for all other browsers and some fudge for IE, notice that the style has an added selector and that in the script configuration, tipwidth is now set as just a number, no units or quotes, other script changes too numerous to mention:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fixed ToolTip script, Max Width - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#fixedtipdiv, #fix{
position:absolute;
padding: 2px;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

</style>
</head>
<body>
<script type="text/javascript">

/***********************************************
* Fixed ToolTip script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified here to use max tooltip width by
* jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/
		
var tipwidth=150 //max tooltip width
var tipbgcolor='lightyellow'  //tooltip bgcolor
var disappeardelay=250  //tooltip disappear speed onMouseout (in miliseconds)
var vertical_offset="0px" //horizontal offset of tooltip from anchor link
var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link

/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="fixedtipdiv" style="visibility:hidden;max-width:'+tipwidth+'px;background-color:'+tipbgcolor+'" ></div>')
if (ie4&&fixedtipdiv.filters){
document.write("<style type='text/css'>\n\
#fixedtipdiv {width:expression(Math.min(fix.offsetWidth, "+tipwidth+")+'px');}\n\
<\/style>")
document.write('<span id="fix" style="border:none;padding:0;margin:0;visibility:hidden;position:absolute;z-index:-1;"></span>')
}
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500+'px'
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
return edgeoffset
}

function fixedtooltip(menucontents, obj, e){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidetip()
dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv
dropmenuobj.innerHTML=menucontents
if (dropmenuobj.filters)
fix.innerHTML=menucontents
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
}

function hidetip(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidetip(){
if (ie4||ns6)
delayhide=setTimeout("hidetip()",disappeardelay)
}

function clearhidetip(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

</script>

<a href="http://www.javascriptkit.com" onMouseover="fixedtooltip('Comprehensive JavaScript tutorials and over 400+ <b>free</b> scripts.', this, event)" onMouseout="delayhidetip()">JavaScript Kit</a> |

<a href="http://www.codingforums.com" onMouseover="fixedtooltip('I\'m here.', this, event)" onMouseout="delayhidetip()">CodingForums.com</a>
</body>
</html>

**Null** · 03-01-2006, 06:41 PM

Hi,

Great it works, but how to use this in the show hint script?

Thx

**jscheuer1** · 03-02-2006, 01:11 AM

The two scripts are so similar that, you can take my mod of the Fixed Tooltip script and add this function to the end of it:

Code:

function showhint(hint, obj, e){
fixedtooltip(hint, obj, e);
obj.onmouseout=delayhidetip;
obj.onclick=function(){return false;};
}

Add the:

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

class to the style section, and configure these options:

Code:

var vertical_offset="0px" //horizontal offset of tooltip from anchor link
var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link

to your liking, and you have a max width version of the hint script.

Notes: The #fixedtipdiv, #fix selectors will now configure the hint's appearance. Syntax for invoking the hint is now:

HTML Code:

<a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event)">[?]</a>

with no width specified.

**Null** · 03-02-2006, 10:35 AM

Hi,

Thx for your time of trying to help me out. The bad news: the scripts aren't as similar as I thought. The adapted code doesnt work. So I give you the code I have now of the Show hint script. Perhaps you see in an instance: Hey here must come this and this in order to make it work

Code:

/***********************************************
* Show Hint script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
		
var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

Hope you can help me out.

ps. IE7 final proberbly is going to support max/min-witdh, if it does, what part of code can I leave out then? (so in the feature I can clean up the script and don't have to ask this again

)

Many thx

Null

**jscheuer1** · 03-02-2006, 04:46 PM

Worked here.

**Null** · 03-02-2006, 04:55 PM

Originally Posted by jscheuer1

Worked here.

Okay I am doing something wrong then.

I even tried finding the differences between the sctipt you gave and the one I gave above, trying to make it work.

Sorry to say, it didn't work. Need it more for the Show HInt. For the fixed tooltip it works great.

Null

Thread: Auto size for: Fixed Tooltip script and Show Hint script needed

Thread Tools

Search Thread

Auto size for: Fixed Tooltip script and Show Hint script needed

Bookmarks

Bookmarks

Posting Permissions