/    Sign up×
Community /Pin to ProfileBookmark

Tooltip Hiding

Copy linkTweet thisAlerts:
Jul 17.2008

So I have a tooltip function that displays some text when certain elements in the sidebar of my website are rolled over with the mouse. The problem is that while the text goes away when I rollout within the sidebar, they do not go away when I move the mouse out of the sidebar and into the main body. Does anybody know how to make it so that when I move the mouse into the main body the tool tip goes away?

My current tooltip Hide function. Only hides when moved away within the sidebar:

function tt_Hide()
{
if(tt_db && tt_iState)
{
tt_OpReHref();
if(tt_iState & 0x2)
{
tt_aElt[0].style.visibility = “hidden”;
tt_ExtCallFncs(0, “Hide”);
}
tt_tShow.EndTimer();
tt_tHide.EndTimer();
tt_tDurt.EndTimer();
tt_tFade.EndTimer();
if(!tt_op && !tt_ie)
{
tt_tWaitMov.EndTimer();
tt_bWait = false;
}
if(tt_aV[CLICKCLOSE] || tt_aV[CLICKSTICKY])
tt_RemEvtFnc(document, “mouseup”, tt_OnLClick);
tt_ExtCallFncs(0, “Kill”);
// In case of a TagToTip tooltip, hide converted DOM node and
// re-insert it into document
if(tt_t2t && !tt_aV[COPYCONTENT])
{
tt_t2t.style.display = “none”;
tt_MovDomNode(tt_t2t, tt_aElt[6], tt_t2tDad);
}
tt_iState = 0;
tt_over = null;
tt_ResetMainDiv();
if(tt_aElt[tt_aElt.length – 1])
tt_aElt[tt_aElt.length – 1].style.display = “none”;
}
}

to post a comment
JavaScript

23 Comments(s) ↴

Copy linkTweet thisAlerts:
@walker6o9authorJul 17.2008 — I currently have a tooltip function which displays a gray box and some text. I also need to add an image next to the text, but I don't know how to do this. My code for showing the textbox:

function tt_Show()

{

var css = tt_aElt[0].style;

// Override the z-index of the topmost wz_dragdrop.js D&D item
css.zIndex = Math.max((window.dd && dd.z) ? (dd.z + 2) : 0, 1010);
if(tt_aV[STICKY] || !tt_aV[FOLLOWMOUSE])
tt_iState &= ~0x4;
if(tt_aV[DURATION] > 0)
tt_tDurt.Timer("tt_HideInit()", tt_aV[DURATION], true);
tt_ExtCallFncs(0, "Show")
css.visibility = "visible";
tt_iState |= 0x2;
if(tt_aV[FADEIN])
tt_Fade(0, 0, tt_aV[OPACITY], Math.round(tt_aV[FADEIN] / tt_aV[FADEINTERVAL]));
tt_ShowIfrm();
}

function tt_ShowIfrm()

{

if(tt_ie56)

{

var ifrm = tt_aElt[tt_aElt.length - 1];

if(ifrm)

{

var css = ifrm.style;

css.zIndex = tt_aElt[0].style.zIndex - 1;

css.display = "block";

}

}

}
Copy linkTweet thisAlerts:
@walker6o9authorJul 17.2008 — From gray to blue with a purple border. I need it to be gray with no border.
Copy linkTweet thisAlerts:
@FangJul 17.2008 — It's all in the documentation
Copy linkTweet thisAlerts:
@walker6o9authorJul 17.2008 — I'm trying to use the tip_balloon.js with the wz_tooltip.js. I appended my code in the html to

onmouseover="Tip('This is a balloon tooltip', BALLOON, true, ABOVE, true)"

and the code in my tip_ballon.js in the GLOBAL TOOLTIP CONFIGURATION to read:


//=================== GLOBAL TOOPTIP CONFIGURATION =========================//

config. Balloon = true// true or false - set to true if you want this to be the default behaviour

config. BalloonImgPath = "../scripts/tip_balloon/stemb.gif" // Path to images (border, corners, stem), in quotes. Path must be relative to your HTML file.

// Sizes of balloon images

config. BalloonEdgeSize = 6 // Integer - sidelength of quadratic corner images

config. BalloonStemWidth = 15 // Integer

config. BalloonStemHeight = 19 // Integer

config. BalloonStemOffset = -7 // Integer - horizontal offset of left stem edge from mouse (recommended: -stemwidth/2 to center the stem above the mouse)

//======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============//


But when I test this, the text still comes up, but nothing else except for a transparent border.
Copy linkTweet thisAlerts:
@FangJul 18.2008 — BalloonImgPath is for the path to the images, the file name is given in the tooltip string associated with the element's onmouseover event.
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — I'm a little confused, can you show me an example?
Copy linkTweet thisAlerts:
@FangJul 18.2008 — config. BalloonImgPath = "../scripts/tip_balloon/" // Path to images (border, corners, stem), in quotes. Path must be relative to your HTML file.

<td><a onmouseover="Tip('Online Function Grapher written in JavaScript<br> <br><img src=../images/grapher.gif width=210 height=175>',SHADOW, true, BGCOLOR, '#ffffff', FADEIN, 400, FADEOUT, 400)" onmouseout="UnTip()" href="../grapher/grapher_e.htm">Function-Grapher</a></td>
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — Do you still do an include for tip_balloon in your html? And is images/grapher.gif your tip image?
Copy linkTweet thisAlerts:
@FangJul 18.2008 — Do you still do an include for tip_balloon in your html? [/QUOTE]No
And is images/grapher.gif your tip image?[/QUOTE]Yes

Simple is to place your image in the same folder as the html document:
config. BalloonImgPath= "";
onmouseover="Tip('Online Function Grapher written in JavaScript<br> <br><img src=myImage.gif width=210 height=175>',SHADOW, true, BGCOLOR, '#ffffff', FADEIN, 400, FADEOUT, 400)"
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — The problem is that this still appears inside of my textbox, like a background image. Is there a way I can move it so that it appears just outside of my textbox and to the left?
Copy linkTweet thisAlerts:
@FangJul 18.2008 — No
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — Then how to I get a pointer arrow on the left of my textbox like on the tip_balloon example?
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — I've been trying this forever. Do you have a working example you could send me any chance?
Copy linkTweet thisAlerts:
@FangJul 18.2008 — Then how to I get a pointer arrow on the left of my textbox like on the tip_balloon example?[/QUOTE]Where is this?
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — Where is what? The tip_balloon is example? http://www.walterzorn.com/tooltip/extensions.htm
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — If you know another way to add a pointer arrow to the left box that works too.
Copy linkTweet thisAlerts:
@FangJul 18.2008 — pointer arrow? Do you mean the hand pointer?
Copy linkTweet thisAlerts:
@FangJul 18.2008 — It's style:<p [COLOR="Blue"]style="cursor:pointer;"[/COLOR]>Ut wisi enim ad minim veniam.</p>
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — ? Where does the code go? Can you please show me an example?
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — I don't want to change the way the mouse looks, I want a little arrow as part of the textbox that points to button related to the onmouseover function.
Copy linkTweet thisAlerts:
@walker6o9authorJul 18.2008 — What I need is for this example to work right http://www.walterzorn.com/tooltip/extensions.htm
×

Success!

Help @walker6o9 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...