PDA

View Full Version : 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;
width: 150px; (default) but you can also set the width manualy for each tip like;
, 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;
, 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:


var tipwidth='' //default tooltip width

Find this line:


dropmenuobj.widthobj.width=tipwidth

Change it to:


dropmenuobj.widthobj.width=''

Use this syntax for a tip:


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:


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:


<!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:


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:


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:


<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 :)

/***********************************************
* 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
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

jscheuer1
03-02-2006, 05:37 PM
I didn't mean to work from the hint script, rather from the already modified version of the tool tip script:


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

Anyways, I was playing around with a sort of dual version of the script later and noticed some things about the hint script that could have been done better, try this out (notice that now span tags are used for the hints and that the hint syntax is as mentioned in my previous post on the hint script and there are extra configuration items, top of script):


<!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/Hint 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 6px;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
cursor:pointer;
}
</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 width and be optionally used for hints by
* jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

var tipwidth=175 //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
var H_vertical_offset="-18px" //horizontal offset of hint from anchor link
var H_horizontal_offset="24px" //horizontal offset of hint from anchor link

/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
var v_off=vertical_offset
var h_off=horizontal_offset

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"
}
vertical_offset=v_off
horizontal_offset=h_off
}

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)
}

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

</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>

<form>
<b>Username:</b> <input type="text" class="test" /> <span class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event)">[?]</span><br />
<b>Password:</b> *<input type="text" class="test" /> <span class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event)">[?]</span><br />
</form>
</body>
</html>

Null
03-02-2006, 06:35 PM
Hi,

IT WORKS.... great!!! Respect dude, respect!

I was playing around with it and I wanted to add an arrow image to it, so it would look like this:
http://www.webmastercity.nl/forum/files/voorbeeld_899.jpg
The upper is the situation now, and the one below it is how I want it.

With this arrow gif:
http://www.webmastercity.nl/forum/files/arrow2.gif

I'd tried to achieve this by changing the following:
At this line:
dropmenuobj.innerHTML=menucontentsadd the image.

dropmenuobj.innerHTML=menucontents + '<img src="pijl.gif">'And style it like
#hintbox img {
position:absolute;
left:-6px;
top:8px;
}
But the result is this:
http://www.webmastercity.nl/forum/files/pijl.jpg
It just put the image in and no matter what I change in the style, it stays there.

Any thoughts? Or am I at the wrong track at all?

Ps: the tooltip switches form right to left when hitting the border. This means the image needs to switch too.

Also, is it possible to keep the tooltip inside of a div? I have made a big grey block with the tooltip script in it. I want to have the tooltip stays inside the div, so it als switches to the left if it hits the border. I have made a html excample of what i mean, it's attached here as a .txt file, just change it to .html.

I know a lot of questions, but really love the script!!!!

Thx for your time and the great combo script given above!

Null

jscheuer1
03-02-2006, 10:12 PM
I think the bit about confining the hint to a division is doable but, I'll have to get back to you on that. This worked here with the arrow idea:


dropmenuobj.innerHTML='<img src="arrow2.gif" style="position:absolute;top:8px;left:-7px;">'+menucontents

Null
03-02-2006, 11:18 PM
Hi,

Great the image works now, I see you switched it (the code I had). Thx again.

I've tested your script some more and discovered a bug! (please don't hit me :D:D:D)

Well with the original hint script, if your link to the hint was placed near the right border of your screen, it would switch to the left beautifully, also leaving the text aligned to the left.

The new combo script doesn't do this. It will place the hint/tooltip over the [?] link. In short, it doesn't switch like the original script did. It also aligns the text to the right when this happends. I have attached an image to give a better understanding of what I mean.

As you can see on the image the arrow.gif image isn't switched to the right either.


I think the bit about confining the hint to a division is doable but, I'll have to get back to you on that. Great! i think it is possible too. Kinda hoped it would work the way I did... A solution could be the use of frames, but who wanna use them, though it will keep the tooltip in. Not a realy nice solution though.

Greetz Null

jscheuer1
03-03-2006, 01:19 PM
That's not a bug, it's a feature! Not really, in this case. I've optimized your arrow image (got it down to 62 bytes) and made a mirror image version of it to use when the right browser edge is too close, revamped the code a bit, here are the two images:

290

291

and the revamped 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/Hint script, Max Width - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#fixedtipdiv, #fix { /*CSS for hint and tip display boxes*/
position:absolute;
padding: 2px 3px;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#arr_1 { /*hint arrow style normal*/
position:absolute;
left:-7px;
top:8px;
}
#arr_2 { /*hint arrow style when hint is appearing to left of anchor*/
position:absolute;
right:-7px;
top:8px;
display:none; /*must remain*/
}
.hintanchor{ /*CSS for element that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
cursor:pointer;
}
</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 width and be optionally used for hints 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" //vertical offset of tooltip from anchor link
var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
var H_vertical_offset="-18px" //vertical offset of hint from anchor link
var H_horizontal_offset="24px" //horizontal offset of hint from anchor link
var arrow_bottom_offset=12 //bottom offset of hint arrow when hint appears above browser bottom edge

/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
var v_off=vertical_offset
var h_off=horizontal_offset

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=obj.className=='hintanchor'?dropmenuobj.offsetWidth+parseInt(horizontal_offset):dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure){
if (obj.className=='hintanchor') {
document.getElementById('arr_1').style.display='none';
document.getElementById('arr_2').style.display='inline';
}
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=obj.className=='hintanchor'?dropmenuobj.offsetHeight+parseInt(vertical_offset):dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){
if (obj.className=='hintanchor') {
document.getElementById('arr_1').style.top=document.getElementById('arr_2').style.top=dropmenuobj.offsetHeight-arrow_bottom_offset+'px';
}
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=obj.className=='hintanchor'?'<img id="arr_1" src="hint_arrow.gif">'+menucontents+'<img id="arr_2" src="hint_arrow_2.gif">':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"
}
vertical_offset=v_off
horizontal_offset=h_off
}

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)
}

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

</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>

<form>
<b>Username:</b> <input type="text" class="test" /> <span class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event)">[?]</span><br />
<b>Password:</b> *<input type="text" class="test" /> <span class="hintanchor" onMouseover="showhint('short', this, event)">[?]</span><br />
</form>
</body>
</html>

Notes: The unit for clearing the browser edges is still as it was with the fixed tip, if using the script for a fixed tip, so I have not tested that part much, it branches when used for the hint to accommodate its peculiarities. I'm still a little vague on why you would need the hint to clear a division's border rather than the browser's edge, why is that?

Null
03-03-2006, 02:35 PM
Hi,

Wanted to test the new code but got these errors:
{\rtf1\ansi\ansicpg1252\deff0\deflang1043{\fonttbl{\f0\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.15.1507;}\viewkind4\uc1\pard\f0\fs20 \par \par \par \par \par \par \par \par \par \par JavaScript Kit |\par \par CodingForums.com\par \par
And some other /par appear for the form etc.

I'm still a little vague on why you would need the hint to clear a division's border rather than the browser's edge, why is that?
Well:
1) Just to look if this is possible and how to do it, this also gives more control of containing the tooltip.

2) I want to use this in a album script and don't want to have the tooltip extends the borders (in red see attach). So I figured, put it in a DIV and restrict it somehow. This way the last image's tooltip will appear left...

Greetz,
Null

jscheuer1
03-03-2006, 03:22 PM
Not getting those errors here - I even copied directly from my last post, just to be sure, was that before or after you navigated to codingforums or javascriptkit? What browser?

Like I said on the restriction to a division, I'd have to get back to you on that, seems excessive though.

Null
03-03-2006, 03:43 PM
Hi,

Re-copied and works fine now (tested in Opera, IE7 and FF). Proberbly something went wrong when I saved it as html from notepad.

Like I said on the restriction to a division, I'd have to get back to you on that, seems excessive though.
I know, take your time, it's not high priority, but you asked for it cause you where still a little vague on why I would need the hint to clear a division's border rather than the browser's edge. So I thought I would explained it somemore :)

Going to play around (and do some more crossbrowser testing) whith this great script now!!

Thx again
Null

Null
03-03-2006, 05:49 PM
Hi,

After playing around with the script, I've found a feature not working well. If you keep the [?] as text link the script works great, but when using an image instead, it wont.

Though the [?] is great and all, I wanted to use a very nice image instead like: http://www.baccoubonneville.com/blogs/media/exclamationMark.jpg (better grafical options are around i know). Well when using an image, the tooltip will not be positioned at all, though the original show hint script had no problems with this.

I have added an image to show you what I mean.

ps; In the attachment image I've used an extra large image to show the problem better.

Thx

jscheuer1
03-03-2006, 07:18 PM
Did you remember to give your image tag a class of 'hintanchor'? If so, did you try adjusting the:


var H_vertical_offset="-18px" //vertical offset of hint from anchor link
var H_horizontal_offset="24px" //horizontal offset of hint from anchor link

variables to compensate?

Null
03-03-2006, 08:09 PM
Did you remember to give your image tag a class of 'hintanchor'? If so, did you try adjusting the:


var H_vertical_offset="-18px" //vertical offset of hint from anchor link
var H_horizontal_offset="24px" //horizontal offset of hint from anchor link

variables to compensate?Yeah it where the variables thx :o
A question, is there a way to auto ajust this, cause the normal hint script did it right with any image. (perhaps with: var H_horizontal_offset="img height", don't know if this works)

0

Null
03-10-2006, 03:09 PM
Hi jscheuer1,

Any luck on the "keep the tooltip between the div borders? Did some research on my own but couldn't find anything about this. Must be some unique request :) The closest thing I found was this:
http://schoolinsummertime.com/tooltip/tooltip.html

If you are busy with other things I understand, just checking if you already found some need solution :)

Thx

Null

jscheuer1
03-10-2006, 03:45 PM
I did do some additional work on that and the positioning of the hint. I will have to check my work and get back to you. One question though. As I recall, I had it working so as the hint could be confined to a division but, not if that division had scrolling overflow. I noticed in your image showing the division there were no scrollbars on the division. If there never would be, this would make it easier. Does this 'container' division ever have scrollbars?

Null
03-10-2006, 03:58 PM
Hi,

Quick replay great :D

To answer your question:
No, the container will NEVER have scrollbars. It is an area with the size and height I give and will not have to show scrollbars.

Looking forward testing it!

Null

jscheuer1
03-11-2006, 06:09 AM
There are some extreme cases involving the use of the container division where things could get odd but, there is no reason to cause that as you have control over that part (the container) of the layout, just allow enough width and height to the container so that hints don't get caught between either both the right container edge and the left browser edge or the bottom container edge and the top browser edge:


<!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/Hint script, Max Width - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#fixedtipdiv, #fix { /*CSS for hint and tip display boxes*/
position:absolute;
padding: 2px 3px;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#arr_1 { /*hint arrow style normal*/
position:absolute;
left:-7px;
top:8px;
}
#arr_2 { /*hint arrow style when hint is appearing to left of anchor*/
position:absolute;
right:-7px;
top:8px;
display:none; /*must remain*/
}
.hintanchor{ /*CSS for element that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 0 8px;
cursor:pointer;
}
span.hintanchor {
position:relative;
top:-2px;
}
</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 width and be optionally used for hints,
* and optionally use a 'container' division around hint area 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" //vertical offset of tooltip from anchor link
var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
var H_vertical_offset="0px" //vertical offset of hint from anchor link
var H_horizontal_offset="8px" //horizontal offset of hint from anchor link
var arrow_bottom_offset=12 //bottom offset of hint arrow when hint appears above browser bottom edge
var div_contain="container" //set to id of containing division, comment out or remove this line otherwise

/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
var v_off=vertical_offset
var h_off=horizontal_offset

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"){
if (typeof div_contain=="undefined")
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
else
var windowedge=document.getElementById(div_contain).offsetLeft+document.getElementById(div_contain).offsetWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure){
if (obj.className=='hintanchor') {
document.getElementById('arr_1').style.display='none';
document.getElementById('arr_2').style.display='inline';
}
edgeoffset=dropmenuobj.contentmeasure+(obj.className=='hintanchor'?obj.offsetWidth+parseInt(horizontal_offset):0)
}
}
else{
if (typeof div_contain=="undefined")
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
else
var windowedge=document.getElementById(div_contain).offsetTop+document.getElementById(div_contain).offsetHeight-15
dropmenuobj.contentmeasure=obj.className=='hintanchor'?dropmenuobj.offsetHeight+parseInt(vertical_offset):dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){
if (obj.className=='hintanchor') {
document.getElementById('arr_1').style.top=document.getElementById('arr_2').style.top=dropmenuobj.offsetHeight-arrow_bottom_offset+'px';
}
edgeoffset=dropmenuobj.contentmeasure/(obj.className=='hintanchor'?2:1)
}
}
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=obj.className=='hintanchor'?'<img id="arr_1" src="hint_arrow.gif">'+menucontents+'<img id="arr_2" src="hint_arrow_2.gif">':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")+(obj.className=='hintanchor'?obj.offsetWidth:0)+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+(obj.className=='hintanchor'?0:obj.offsetHeight)+"px"
}
vertical_offset=v_off
horizontal_offset=h_off
}

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)
}

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

</script>
<div id="container" style="width:450px;height:100px;border:1px solid red;padding:5px;">
<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>

<form>
<b>Username:</b> <input type="text" class="test" /> <img src="thumb2/photo9.jpg" width="140" height="225" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event)"><br />
<b>Password:</b> *<input type="text" class="test" /> <span class="hintanchor" onMouseover="showhint('short', this, event)">[?]</span><br />
</form>
</div>
</body>
</html>

There could be some bugs, let me know. When using the container, if the browser becomes smaller than the container, the hint will follow the rules of the contained, nothing to do about that but, it should be fine as the content will be off screen as well as the hint in most cases, prompting the user to enlarge the browser window. Just don't use a container larger than 800x600.

Null
03-11-2006, 09:21 AM
Tank you sooo much! I will test this as soon as my parents are going back home :rolleyes: I am curoius though, why not make it larger then 800x600? Not that it has to be any larger....

If I find any bugs, I will post them here.

Again, thank you very much!

Null

Null
03-11-2006, 11:16 AM
Hi,

Okay did some quick testing, will do some extended testing later. Results till now:

IE7 beta: got a bug, but could be IE7 too. I mean it's still beta
Opera: no problems so far
Firefox: no problems so far
Netscape: no problems so far
IE6: not yet tested

More info later on

Null

jscheuer1
03-11-2006, 01:40 PM
With a container larger than 800x600, not only will your page will be larger than 800x600, but your 'area of interest' will also be larger than 800x600, which is the smallest, still fairly widely used monitor resolution setting. Folks still using that kind of equipment will be unable to even frame your gallery, or whatever it is in the container, within a browser window.

Null
03-11-2006, 08:34 PM
With a container larger than 800x600, not only will your page will be larger than 800x600, but your 'area of interest' will also be larger than 800x600, which is the smallest, still fairly widely used monitor resolution setting. Folks still using that kind of equipment will be unable to even frame your gallery, or whatever it is in the container, within a browser window.Figured something like this.

Well did some testing in IE6 and all works great. No bugs detected yet. I have a new request (plz don't hit me :rolleyes: ). It's a beautifulcation (is this even a word?) request. Ok, as you know I wanna use this in a photoalbum. In this album you can drag and drop the photo's, you can re-order the photo's this way.

While testing this great and wonderfull script, I noticed the tooltip stayed positioned at where it appears the first time. I go with my mouse to the photo, the tooltip appears (it doesn't follow the photo). Now I move this photo to the left, the tooltip stays a the place where it appears. Now I do a new mouse-over and the tooltip is shown correct.

It would be nicer/more beacutiful if the tooltip follows the image, like this tooltip follows the mouse pointer: http://schoolinsummertime.com/tooltip/tooltip.html Is this possible?

Greetz Null

ps. I realy find it great you are helping me out and so. Just wanted to say thank you for it, realy appreciate it!!

jscheuer1
03-12-2006, 08:54 AM
I'm thinking that can be done one of two ways, the tip could literally follow the mouse or be more closely tied to the image. What code are you using to drag and drop the images? If that could be tied in to the tip script, the tip could more closely follow the image. This might be better than hanging the tip on the mouse pointer as that is undoubtedly used extensively by the drag and drop code. It would also might make it look better.

Null
03-12-2006, 10:37 AM
Hi,

The drag and drop code used is old (2003) and perhaps need some updates, if you find some stuff that need updating or changed to work faster/ better or can make the code smaller, plz do. I also don't want the tooltip to be attached to the mouse, but to the image like it is done now.

The JS script I use: see attachment

Thank you for your time

jscheuer1
03-12-2006, 06:32 PM
I am aware of Walter Zorn's fine drag and drop unit. That is not to say I am very familiar with it, especially its various versions through the years. When I get the time, I will investigate. Good news is I do remember that most versions of wz_dragdrop.js provide hooks to allow other code to know exactly what it is doing with the positioning of the dragable content 'on the fly'. Using these would be the best bet, I imagine.

Could you post a link to your current version of the page?

Null
03-12-2006, 06:46 PM
The attachment i gave above is the latest/ last version of walters d&d script.

Sounds promising you already heard of it :) perhaps you could help me with some coordinate-writing problems I have with this script too. But that's a whole other problem. Keeping the bubble with the image is priority now :)

Thx

jscheuer1
03-12-2006, 07:32 PM
A link to your page (or to a demo of the work in progress) would still be most helpful.

Null
03-14-2006, 12:10 PM
Hi,

Okay, I will make a demo of the things I have. Also putting in the other problem I have as well. (the coordinate saving problem) The coorinate problem is not realy for a project, but I was soo curious about this and tried to make it work myself. I will explain more about this when I have the demo online, proberbly tonight!

Greetz

Null
03-14-2006, 11:07 PM
EDIT: Going the remove this one old demo I put up here. Found out that iFrames works great and keeps the draggable image in it too (a problem I had), so the container idea (witch is great) isn't needed anymore. Doing some more testing and when I am fine with it I will post a demo!

Null

Null
03-18-2006, 12:15 PM
Hi,

Okay the long promised demo's:

Demo 1:
This demo shows the hinscript, whithout the divcontainer, cause I don't need that anymore. Going for iFrames. Images are scaled down for demo purposes.
http://www.sourceskins.com/demo/test.html
Works in: IE 6, FF and Opera

Demo 2:
The modified Drag & Drop script by Walter. I've modified some stuff so the coördinates of the image are safed. This way the image stays where you dropped it.
http://www.sourceskins.com/demo/index.html
Works in: IE 6, FF and Opera

Demo 3:
Here I've tried to combine the two scripts. Only the image isn't draggable anymore :(. I just added the hintscript just as I did in demo 1, but something prevents the image from being draggable as soon as this is added. Why? :confused:
http://www.sourceskins.com/demo/hintanddad.html
Doesn't work in any browser. IE 6 does drag and drop the image, but the tooltip is not working right...

Really need some help with this. Tried everything I could think of to make these two scripts compatible with eachother. I am out of options :eek:

Thank you for you time

Null

Null
03-29-2006, 09:31 PM
Some help? I don't understand why these to scripts combined work on my desktop, but not online... And how to intergrate the tooltip so it follows the image?

Thx

Null
04-05-2006, 01:34 PM
jscheuer1? Any1?

skilled1
04-05-2006, 04:53 PM
looks like the tooltips is not working correctly in FF 1.5 and the image is not able to be dragged, howver it is able to be dragged in IE6 with just the tip malfunctioning...don't mind me while i test some more.

Null
04-26-2006, 01:18 PM
Hi,

After some puzzling I've fixed the main bugs. The div ID etc wasn't set right, so the script(s) didn't work. This is now fixed.

For a working demo of the HINT and drag and drop script working together:
http://www.sourceskins.com/demo/hintanddad.html

But the problem of the hint not following the image when it's being dragged still remains. Really need some help with this. Perhaps it could be attached as a child so it would follow, but I couldn't get this done. jscheuer1 if you read this, you are familiar with walters d&d script, hope you can help me out or provide some other solution :D

Many thx

Null