stylish tooltip is not working. resolve it?

**venkat6134** · May 5, 2011 23:44

Hi all,
I added the tooltip for mouseover event on select box items..

Design New Cable

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..

**Paul O'B** · May 6, 2011 02:11

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.

**venkat6134** · May 6, 2011 02:19

that select box is dynamically generating, by collecting the data from database..
then how to add that functionality(css) to this select box items?

**Paul O'B** · May 6, 2011 03:00

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.

Code:

<option title="This is the tooltip" value="SMA">SMA</option>

Then you need to comment out this section of the jquery because you are not using a tooltip div.

Code:

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

That would seem to make the tooltip display ok. Hover over SMA and a tooltip will appear.
e.g.

Code:

<!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.

**venkat6134** · May 6, 2011 03:11

Thanking you for your reply..
i commented as u suggest but it is not showing the tooltip..

**Paul O'B** · May 6, 2011 04:36

Originally Posted by venkat6134

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.

Code:

<option title="This is the tooltip" value="SMA">SMA</option>

**venkat6134** · May 6, 2011 05:12

that is not for all select boxes, but only the 9th select box, that to dynamically adding title attribute for option tag from database.

**Paul O'B** · May 6, 2011 06:17

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.

Code:

<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&amp; 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.

User Tag List

Thread: stylish tooltip is not working. resolve it?

Thread Tools

Display

stylish tooltip is not working. resolve it?

Bookmarks

Bookmarks

Posting Permissions