CSS - Tooltip On Top Of An Item

Can you style the tooltip box that pops up on hover over an object with the 'title' attrib set?

If so how?

Hours of googling have only led to some fairly complex DHTML/Java solutions that I don't like the look of.

Cheers,

John.

Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) http://jsfiddle.net/AQh6y/3/

I want example this (for how): what do i do?

CSS:

Code:

.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML:

Code:

<ul>
    <li>    
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>
    <br>
    <li>    
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery:

Code:

$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX + 10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})

Can anyone tell me how to change the background colour of all tooltip texts on a web page?

Cheers.

Sample can be seen at this link

I'm using some jQuery Tool tooltip code that will bring up a stylized tooltip when the user hovers over a set of li tags. Right now, I'm just playing with the sample png file that came with the demo . This uses a black box as a background image and then anything I put inside a div class="tooltip" shows up as text inside that image.

Nice, but I can't quite get the tooltip box to pop up where I want it. The li tags are nested inside a div, which is nested inside other divs. So, I need some help figuring out how to tweak the CSS to reposition the tooltip. I'd like it to appear just to the right of the selected li tag, and still stay within the maincol div. Actually, I don't even mind if it floats outside that maincol, just as long as I can get it to show up somewhat closer to the li tag's text.

and just some of the relevant css

Code:

#maincol.second {
padding: 8px;
width:700px;
margin-left: 190px;
margin-right:10px;
background-color:#fff;
min-height:730px;
}

/* tooltip styling */
            .tooltip {
                display:none;
                background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
                height:163px;
                padding:40px 30px 10px 30px;
                width:200px;
                font-size:11px;
                color:#fff;
            }

            .switches {width: 400px;}
            .switches ul{
                font-size: .85em;
                margin: 1em 0 .5em 0;
                }
            .switches li{
                list-style-type:none;
                color:#800000;
                }

I'm trying to use a simple background image to dress up my navigation tabs. When I set the <li> to a fixed with and height, both FF and IE ignore this; thus my graphic gets chopped off when the navigation tab is shorter than the graphic.

I'm scratching my head and have tried just about everything.

Here's How it is Presenting-Link to my Website

Here's my css:

Code:

li.navbg {
    width: 75px;
    height: 20px;
    display: inline;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-left: 7px;
    padding-right: 5px;
    background-image: url(/images/navbg.png);
    background-attachment: scroll;
    background-position: bottom center;
    background-repeat: no-repeat;
    list-style: none;
    background-color: #000;  
}

My xhtml is a simple:

Code:

<li class="navbg">Navigation Title</li>

My gratitude ahead of time!

I swear this question gets asked every other day but I cannot find any thread that has a solution for me. I need to center the following:

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">
  <head>
   <title>Search Home</title>
   <style type="text/css">
     #search_items{ margin: 0 auto; }
   </style>
   </head>
<body>
               <div id="search_items">
                  <form method="get" action="#" id="advanced_search">

                     <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                           <td>
                              <table cellpadding="4" cellspacing="0">
                                 <tr>
                                    <td><!--trh2-->
                                       <strong>Appliance</strong>
                                    </td>

                                 </tr>
                              </table>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <table cellpadding="0" cellspacing="0" class="search_input">
                                 <tr>
                                    <td valign="middle">

                                       <input type="text" name="q" size="32" maxlength="256" value=""/>
                                    </td>
                                    <td valign="middle">
                                       <input type="submit" name="btnG" value="Search"/>
                                    </td>
                                    <td class="more_options">
                                       <a href="#">Advanced Search</a>
                                       <br/>

                                       <a href="#">Search Tips</a>
                                       <br/>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td colspan="2"/>
                                 </tr>
                              </table>

                           </td>
                        </tr>
                     </table>
                  </form>
               </div>
               </body></html>

And I thought that the margin: 0 auto did it but it is not quite working.

Kravvitz to preempt what I know will be a question from you, I am using tables because this is HTML generated by a Google search appliance so I'm just trying to work with what they give me :-)

I've been struggling with this a bit. I would rather not use a container div for my lists, but it seems that it's not possible to assign the lists themselves a width. When I assign a width to the <ol> element, I lose the numbers under the margin on the left, which I can sort-of understand. If I assign a width to the <li> elements, it works fine in Firefox, but IE drops the number on the first <li> and changes the numbers on each following <li> to "1".

Hi Guys,

I have what i think is a rather odd problem and i have not seen it before.

I have just finished creating a wordpress template for my blog which can be found at http://www.mobileshop.com/blog i have pretty much got everything sorted (except Safari pushing the RSS info down) but i have one strange problem in IE.

If you look on the right hand bar in a non IE browser you can see that the lists all have a little icon of a phone as the bullet points. Now if you switch to IE then you will see that the first item of each list is missing the phone icon. Even if i swap it back to normal bullets it still misses the first one off.

The <li>'s all seem structured fine in the html and my css is as follows...

Code:

#rightbar ul li ul {
	background: #fff url(images/cat-bg.gif);
	background-repeat: repeat-y;
	color: #03036a;
	padding: 8px;
	margin: 0;
	margin-top: 0;
}
#rightbar ul li ul li {
	margin: 0;
	margin-left: 20px;
	padding: 0;
	line-height: 20px;
	list-style-image: url(images/phone-bullet.png);
	background: none;
	font-size: 120%;
	width: 210px;
}

I know its probably not the best code but i cannot for the life of me work out why IE does not display the icon for the first <li> item, anyone have any ideas?

Thanx

I have a navigation menu that uses ul and li for its headings. I also have a javascript that gets called on hover of the menu items.

I would like a different script called for hovering over each menu item (so a different action happens for each item). What is the best way to achieve this? Can I have different styles for the menu items?

Code:

<html>
    <head>
        <title>Hi</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script src="hoverIntent.js" type="text/javascript.</script>
        <script type="text/javascript">
        $(document).ready(function () {

            $("#nav a").append("<em></em>");

            $("#nav a").hoverIntent(function () {
                $(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
                var hoverText = $(this).attr("title");
                $(this).find("em").text(hoverText);
            }, function () {
                $(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
            });
        });
        </script>

<style type="text/css">
body {
margin: 0px;
}
#nav {
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none; 
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
} 
#nav li { 
float: left; 
} 
#nav li em { 	
background: url(images/home.png) no-repeat; 	
width: 180px; 	
height: 45px; 	
position: absolute; 	
top: -43px; 	
left: 160px; 	
padding: 20px 12px 10px; 	
z-index: 1; 	display: none; 
} 
#nav li a { 	
font-family:"Georgia", "Sans-Serif";     
display: inline-block;     
text-decoration: none;    
font-size:medium;     
padding: 0px 5px; 	
text-align:center; 	
color: #000;     
width:110px;     
height: 36px;     
line-height: 36px; 	
background:transparent url("images/off.gif") no-repeat top right; 
} 
#nav li a:hover { 	
font-family:"Georgia", "Sans-Serif";     
display: inline-block;     
text-decoration: none;     
font-weight:bold;     
font-size:medium;     
padding: 0px 5px;     
width:110px;     
height: 36px;     
line-height: 36px; 
} 
</style> 
</head> 
<body>    
    <div id="nav"> 	
        <ul> 	    
            <li><a href="#">Option1</a></li> 	    
            <li><a href="#">Option2</a></li> 	    
            <li><a href="#">Option3</a></li> 	    
            <li><a href="#">Option4</a></li> 	    
            <li><a href="#">Option5</a></li>             
            <li><a href="#">Option6</a></li> 	 
        </ul>     
    </div>  
</body> 
</html>

Hi all, and thanks for reading.
The following code looks fine in Firefox, but has huge spaces between the images in IE 6.
CSS:
Code:

#menu {float:left; width:157px; background-color:#FFFFFF;}
		#menu IMG {display:block; margin:0; padding:0;}
		#menu UL {list-style-type:none; margin:0; padding:0; background-color:#FFFFFF;}
		#menu UL LI {margin:0; padding:0;}

HTML:
Code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
	<div id="menu">
		<ul>
		<li><a href="../balloons/" title="Balloons"><img src="../images/menu-balloons.gif" alt="Balloons" width="157" height="37" border="0" /></a></li>
		<li><a href="../centerpieces/" title="Centerpieces"><img src="../images/menu-centerpieces.gif" alt="Centerpieces" width="157" height="37" border="0" /></a></li>
		<li><a href="../supplies/" title="Supplies"><img src="../images/menu-supplies.gif" alt="Suppliers" width="157" height="37" border="0" /></a></li>
		<li><a href="../contact/" title="Contact Us"><img src="../images/menu-contact.gif" alt="Contact Us" width="157" height="37" border="0" /></a></li>
		<li><a href="../" title="Home"><img src="../images/menu-home.gif" alt="Home" width="157" height="37" border="0" /></a></li>
		</ul>
	</div>

Thanks in advance.
-colin

Please look at the bottom of this page in FF -

http://certified.tmhdesign.com

The li elements have a margin-left or the ul a padding left. Can someone help me out? Here is my css

ul#hp_offers{
width:600px;
margin:0 0 0 10px;
border:1px solid #e0e0e0;
}
ul#hp_offers li{
padding:3px 5px 3px 25px;
border-bottom:1px solid #e0e0e0;
list-style:none;
list-style-type:none;
margin:0;
}
li.even{
background: #f1efef url(../images/offer_even_bullet.gif) no-repeat 10px 7px;
}
li.odd{
background: #e0e0e0 url(../images/offer_odd_bullet.gif) no-repeat 10px 7px;
}

I understand enough CSS to get things done, but there is one issue that I can not seem to get my head around.

All the tutorials I have seen on styling forms with CSS leave the form items a set width. The problem is that this is not very flexible.

A text input field for example may need to be short in one usage for entry of things like 6 digit numbers or long for example a URL.

A text area might be used for something small like a comment or for editing a large HTML.

Can you give me a idea on how you make sure that the "Text input" and "text area" elements of your forms match the length of the data the user needs to input?

How do you manage it?

Is there a clean way to display an element right next to a floated div that will have a changing width?

I have an element I'm floating left, with max-width set (using an IE hack for IE). What I want is for my right floated div to display immediately after the left floated one.

It's displaying a headline and a date.

The reason they are not in teh same container is that if the headline is rather long I'm letting the text wrap.

Thanks!

Hi,
I have asp menu in my aspx page. There are 3 menu items. If the user clicks on a menu item, I want to highlight the menu with a different color and by default the other menu items should have another color.

So only the currently selected menu, should have the different color, and the other menu items should have the default color.

How to achieve this?

Thank you

I'm a CSS novice, struggling to understand the nuances of some open source CSS I'm using for a site.

The main horizontal navigation has an extra item at the end of the row and I can't figure out why. Can you help me get rid of it?

Here is my include for the navigation:

<ul>
<li><a href="/index.shtml">Home</a></li>
<li><a href="/about.shtml">About</a></li>
<li><a href="/ultreyas.shtml">Ultreyas</a></li>
<li><a href="/weekends.shtml">Weekends</a></li>
<li><a href="/FAQs.shtml">FAQs</a></li>
<li><a href="/servant_community.shtml">Servant Community</a></li>
<li><a href="/resources.shtml">Resources</a></li>
<li><a href="/stay_in_touch.shtml">Stay in Touch</a></li>
<li><a href="/donate.shtml">Donate</a></li>
</ul>

Here is the CSS:
/*----------------------------*/
/* 2.4 - Navigation - Level 2 */
/*----------------------------*/
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(64,134,204); font-weight: bold;}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}

I'd like "Donate" to be the last item, but there is another empty box appearing to the right of it.

Much obliged,

Laurie