...

View Full Version : How to Keep a Popup Box from Disappearing after a Few Seconds?



BSquared18
11-13-2011, 05:56 PM
I've been working with the following code to have yellow-highlighted words for which call out boxes pop up when the cursor is moved over the target words.


<span style="background-color: yellow" TITLE="
Message
"
><strike>target</strike></span>

Someone mentions elsewhere that with some browsers, the message appears in the status line instead of in a box. I've found that at least for IE, Firefox, and Chrome, a box appears.

One problem, however, is that in IE the box appears for only a couple of seconds and then disappears, after which the cursor doesn't activate the box again. That problem doesn't occur in Firefox or Chrome. Is there a way to change the coding so that in IE (and perhaps other browsers I haven't tested) the box doesn't disappear after a short time?

Thanks,
Bill

BubikolRamios
11-13-2011, 08:00 PM
There is.
http://www.google.si/search?q=css+custom+tooltip&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

BSquared18
11-13-2011, 09:03 PM
Sorry, not sure what I'm supposed to do with the list of Google entries that your link sent me to.

Bill

BubikolRamios
11-13-2011, 09:51 PM
Read it. Instead of default pop up, create your own.

BSquared18
11-13-2011, 11:19 PM
What's confusing me is that the items at the link refer to CSS, and the code I'm working with isn't that.

Anyone else have any suggestions for a snippet of code that would solve my problem?

Bill

RonnieC
11-13-2011, 11:32 PM
Could go with a javascript if you want to get off easy.

Excavator
11-13-2011, 11:42 PM
What's confusing me is that the items at the link refer to CSS, and the code I'm working with isn't that.

Anyone else have any suggestions for a snippet of code that would solve my problem?

Bill

This one, http://psacake.com/web/jl.asp , is a very simple replacement. View the source to see how he writes the markup.

This one is a little more involved - http://downloads.sixrevisions.com/css-tooltips/index.html View the source code to see how this one is done as well.

You've already been told in a related thread that there is no provision for modifying the popup that results from using the title attribute -
Quote from http://www.communitymx.com/content/article.cfm?cid=4e2c0 :
A common part of modern web pages and applications are those handy little text boxes that pop up when some elements are moused over. In web pages these tooltips are usually generated via the title attribute, which can display a small bit of explanatory text for that page element, without otherwise cluttering up the page. This is often quite helpful, but the display of the title attribute is in the hands of the browser, and they all have different ideas about how to handle them, particularly when the text is long enough to need more than one line.

Other than depending on browsers' displays, there is no author accessible mechanism to style these attribute-based "tooltips." There are oodles of JavaScripts that will dynamically create "faux tooltips," but if one wishes to avoid JavaScript, then it's been the boring title attribute "tooltips" or nothing at all. If only there was some way of forcing CSS to style those "tooltips"!

Well, CSS can't actually style browser-based "tooltips," but CSS can create "faux tooltips" much the same as the JavaScript ones, but without all the (possibly) undesirable scripting. There are a few in's and out's involved, but surprisingly, the methods are rather easy to accomplish.

BSquared18
11-14-2011, 03:48 PM
Excavator,

Thanks! The second link provided the code that greatly improves what I'm attempting to do.

Below is the adapted code I am using. In that code, is there a way to eliminate the question mark that appears when the pop-up box opens?

Thanks!
Bill



<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.tooltip {
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
background-color: yellow;
text-indent: 0pt;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }

</style>

Excavator
11-14-2011, 04:12 PM
Below is the adapted code I am using. In that code, is there a way to eliminate the question mark that appears when the pop-up box opens?


Check this bit highlighted in red -
.tooltip {
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
background-color: yellow;
text-indent: 0pt;
}


See CSS cursor property here (http://www.w3schools.com/cssref/pr_class_cursor.asp).

BSquared18
11-14-2011, 04:58 PM
Yes. Changing its attribute to "none" took care of it.

Thanks again,

Bill



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum