Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How to Keep a Popup Box from Disappearing after a Few Seconds?

    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.

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

  • #2
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Sorry, not sure what I'm supposed to do with the list of Google entries that your link sent me to.

    Bill

  • #4
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,994
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Read it. Instead of default pop up, create your own.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    37
    Thanks
    4
    Thanked 4 Times in 3 Posts
    Could go with a javascript if you want to get off easy.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by BSquared18 View Post
    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/cs...ips/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/a....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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    BSquared18 (11-14-2011)

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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>
    Last edited by BSquared18; 11-14-2011 at 04:54 PM. Reason: Solved first of two questions

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by BSquared18 View Post
    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 -
    Code:
    .tooltip {
    			color: #000000; outline: none;
    			cursor: help; text-decoration: none;
    			position: relative;
    			background-color: yellow;
    			text-indent: 0pt;
    		}
    See CSS cursor property here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    May 2007
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Yes. Changing its attribute to "none" took care of it.

    Thanks again,

    Bill


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •