Hi all,
I added the tooltip for mouseover event on select box items…
In this page, i added mouseover tooltip on 9th select box items.
First at the time of loading the page, it will show only one select box…
Based on selection it will show second… and so on…
Please resolve this problem…
Thanking you…
There doesn’t seem to be a tooltip element in the html unless its supposed to be added dynamically but I couldn’t see where.
This seems to be more a javascript question than CSS anyway so I’ll move it to javascript.
that select box is dynamically generating, by collecting the data from database…
then how to add that functionality(css) to this select box items?
Hi,
This is more of a javascript question but I’ll answer what I can.
You are asking for a tooltip to be displayed based on the title attribute of the option element. Therefore you need to ensure that you have all the title attributes in place in your option elements.
e.g.
<option title=[B]"This is the tooltip"[/B] value="SMA">SMA</option>
Then you need to comment out this section of the jquery because you are not using a tooltip div.
<script type="text/javascript">
$(document).ready(function() {
$("option[title]").tooltip({
// use div.tooltip as our tooltip
[B] //tip: '.tooltip',[/B]
// use the fade effect instead of the default
effect: 'fade',
// make fadeOutSpeed similar to the browser's default
fadeOutSpeed: 100,
// the time before the tooltip is shown
predelay: 200,
// tweak the position
position: "right",
//offset: [18,5]
offset: [18,20]
});
});
</script>
That would seem to make the tooltip display ok. Hover over SMA and a tooltip will appear.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<style type="text/css">
.tooltip {
display:none;
background-color:red;
border:1px solid black;
padding:3px;
FONT-FAMILY:Arial;
COLOR: blue;
font-size:13px;
width:300px;
box-shadow: 2px -2px 11px #666;
-moz-box-shadow: 2px -2px 11px #666;
-webkit-box-shadow: 2px -2px 11px #666;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666');
}
</style>
</head>
<body>
<form action="">
<div>
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Select a Series</option>
<option value="N-Type">N-Type</option>
<option title="This is the tooltip" value="SMA">SMA</option>
<option value="SMB">SMB</option>
<option value="BNC">BNC</option>
<option value="TNC">TNC</option>
<option value="UHF">UHF</option>
<option value="SMC">SMC</option>
<option value="MMCX">MMCX</option>
<option value="MCX">MCX</option>
<option value="SSMB">SSMB</option>
<option value="HN">HN</option>
<option value="MiniUHF">MiniUHF</option>
<option value="SMP">SMP</option>
<option value="7/16">7/16</option>
<option value="1.0/2.3">1.0/2.3</option>
</select>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("option[title]").tooltip({
// use div.tooltip as our tooltip
//tip: '.tooltip',
// use the fade effect instead of the default
effect: 'fade',
// make fadeOutSpeed similar to the browser's default
fadeOutSpeed: 100,
// the time before the tooltip is shown
predelay: 200,
// tweak the position
position: "right",
//offset: [18,5]
offset: [18,20]
});
});
</script>
</body>
</html>
If your question is how to add those tooltips to each select dynamically from the database then someone else will have to answer as I’m strictly CSS I’m afraid.
BTW make sure you use a valid doctype.
Thanking you for your reply…
i commented as u suggest but it is not showing the tooltip…
Where have you placed the tooltip text. I still can’t see it anywhere?
It needs to be added as the title attribute to the option element as I mentioned above.
<option [B]title="This is the tooltip"[/B] value="SMA">SMA</option>
that is not for all select boxes, but only the 9th select box, that to dynamically adding title attribute for option tag from database.
Hi,
I think I finally understand and it seems to be a js issue:)
As I understand it you have a tooltip on this select only.
<select name="drop_9" id="drop_9" onChange="getTwo('cable_imgid11.php?c_name='+encodeURIComponent(this.value));gettext();">
<option value=" " disabled="disabled" selected="selected">Choose one</option>
<option title=" 10 AWG Solid .108″ Bare Copper-covered Aluminum Conductor � Duobond� II + Tinned Copper Braid Shield 95& coverage Foam HDPE Insulation � Polyethylene Jacket Nom OD .403�" value="RG-8">RG-8</option>
etc ...
That select is loaded dynamically and the problem appears to be that jquery doesn’t know anything about that element because it wasn’t there when you ran document ready at the beginning.
Therefore you probably need to call the tooltip routine again after you have loaded the select element and its options.
I can confirm that the tooltip is working when the select is already in the page so there is no problem with the css. Try calling the tooltip rotune again after you have loaded the select.
I’m not sure where you would hook the code in so hopefully one of the javascript experts will come along and fill in the missing blanks for you now that the problem is understood fully.