SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do you get something to display above (and on top of page) where you mouse over?

    I've seen it in maps and other things that when a user moves his/her mouse over an area, a little area displays, for example, more details about that item. It's not a javascript alert, it's something else.

    Any ideas how to do this and what browsers it's compatible with?

    Many thanks.

  2. #2
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Can you post a link to one of those pages for an example?

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://maps.yahoo.com/maps_result?ad...w=1&name=&qty=

    Put your mouse over the star in the middle - it tells what that star is, If you choose a restaurant type off to the right side, it will display lots of little icons where that type of restaurant is. if you mouse over those, it will display detail about the restaurant.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    tooltips can be made in CSS often they use JavaScript

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	body{margin:0;background:#dedede;font-size:1em;}
    	
    	.con{width:30em;float:left;display:inline;margin:2em 0em 0 2em;border:0em solid #ff0000;}
    	
    	.hv{width:30em;border:0px solid #0000ff;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:.8em;
    	}
    	
    	.hv a span {display: none;text-decoration:none;color:#000000;}
    	.hv a{text-decoration:none;}
    	
    	.hv a:hover{background-color:transparent;}/* IE/Win */
    	
    	.hv a:hover span{position: absolute;display:block;}
    	
    	.hv a:hover .pa,.hv a:hover .pb,.hv a:hover .pc,.hv a:hover .pd,.hv a:hover .pos {
    	position: absolute;
    	display: block;
    	}
    	
    	.r{position:relative;}
    	.a{position:absolute;}
    	
    	
    	.cst,.csa,.csb,.csc,.csd{
    	padding:.1em 3em .1em .5em;
    	background: #eeeeee;
    	border-width:.05em .05em .05em .05em;
    	border-color:#000000 #ffffff #ffffff #000000;
    	border-style: solid;
    	}
    	
    	.csa{background: #eaeaea;}
    	.csb{background: #d8d8d8;}
    	.csc{background: #c6c6c6;}
    	.csd{background: #b4b4b4;}
    	
    	.hv a:hover .po{top:-1.3em;left:0;}
    	.hv a:hover .pos {top:-1.65em;left:-.05em;}
    	
    	.pa {top:-1.5em;left:1.5em;}
    	.pb {top:-1.5em;left:1.5em;}
    	.pc {top:-1.5em;left:1.5em;}
    	.pd {top:-1.5em;left:1.5em;}
    
    	.paa {top:-1.5em;left:1.5em;}
    	.pab {top:-3.1em;left:1em;}
    
    	.pba {top:-1.5em;left:1.5em;}
    	.pbb {top:-3.1em;left:1em;}
    
    	.pca {top:-1.5em;left:1.5em;}
    	.pcb {top:-3.1em;left:1em;}
    	
    	.pda {top:-1.5em;left:1.5em;}
    	.pdb {top:-3.1em;left:1em;}
    	
    	
    	.za{z-index:100;}
    	.zb{z-index:100;}
    	.zc{z-index:100;}
    	.zd{z-index:100;}
    	
    	.con{float:left;}
    	
    	.fl{float:left;}
    	.fr{float:right;}
    	.fcl{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
    	
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    
    <body>
    
    
    <div class="con">
    <div class="hv r">
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="po">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="po">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="po">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="po">Tooltip text!</span></a> 
    </div>
    </div>
    
    <div class="con">
    <div class="hv r">
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="pos cst">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="pos cst">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="pos cst">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Link text<span class="pos cst">Tooltip text!</span></a> 
    </div>
    </div>
    
    <div class="con">
    <div class="hv">
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="za r">Link text<span class="pa cst">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="zb r">Link text<span class="pb cst">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="zc r">Link text<span class="pc cst">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="zd r">Link text<span class="pd cst">Tooltip text!</span></a> 
    </div><!--  -->
    </div>
    <div class="con">
    <div class="hv">
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="za r">Link text<span class="paa csa">Tooltip text!</span><span class="pab csb">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="zb r">Link text<span class="pba csb">Tooltip text!</span><span class="pbb csc">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="zc r">Link text<span class="pca csc">Tooltip text!</span><span class="pcb csd">Tooltip text!</span></a> 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##" class="zd r">Link text<span class="pda csa">Tooltip&nbsp;text!</span><span class="pdb csd">Tooltip&nbsp;text!</span></a> 
    </div><!--  -->
    </div>
    <div class="fcl"></div>
    </body>
    
    </html>

  5. #5
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean something like Pure CSS popups? Hover over any menu item and a short discriptive text appears below the menu.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both to all4nerds and figbeam! Both are exactly what I need - spot on (as Chef Gordon Ramsey says) !

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how would I find out what browsers are accepting of this level of CSS?

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    almost all browsers use hover, IE hovers only on the A Tag, this runs in IE NS FF Moz OP (sorry do not have a Mac to test)

  9. #9
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WebDevGuy
    how would I find out what browsers are accepting of this level of CSS?
    Articles often state which browsers will work fine with their code and what happens when they don't, if a page degrades gracefully.

    Many developers keep a number of different browsers, just for testing purposes. Also older versions of browsers. Check out Skyzyx for older standalone versions of IE. Or check any of the many comparisons like QuirksMode


Bookmarks

Posting Permissions

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