SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    stylish tooltip is not working. resolve it?

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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.

  3. #3
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that select box is dynamically generating, by collecting the data from database..
    then how to add that functionality(css) to this select box items?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.
    Last edited by Paul O'B; May 6, 2011 at 04:29.

  5. #5
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanking you for your reply..
    i commented as u suggest but it is not showing the tooltip..

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by venkat6134 View Post
    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>

  7. #7
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is not for all select boxes, but only the 9th select box, that to dynamically adding title attribute for option tag from database.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.


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
  •