jQuery Tooltip in PHP "while" loop not working

Question

I want to display tool-tips on my website, and I'm using this code: http://flowplayer.org/tools/demos/tooltip/table.html

I'm using a while loop to create table rows <tr>. Here is how my tool-tip <div> looks like:

<td class="maandgem">&euro; <?= round($monthavg, 2); ?></td>
<div id="tooltip" class="tooltip">
    Shipping: <?= $row['price_shipping']; ?><br />
    Price: <?= $row['price']; ?><br /><br />
    Total: <?php echo $row['price'] + $row['price_shipping'] + ($row['abo_price'] * $row['abo_time']); ?>
</div>

And this works as planned, it calculates the total price for each <tr>. The problem I'm having is that when I hover over the <td class=maandgem> it always shows the same first tool-tip.

So, each <TD> shows only 1 tool-tip, the first one created. Instead of an unique tool-tip for each row. The PHP part works - there are unique <TD>'s being created. I'm using this code (its the default, I don't understand jQuery much)

$(document).ready(function() {
    $(".maandgem").tooltip({
        tip: '#tooltip',
        position: 'bottom left',
        delay: 0
    });
});

I'm also including this .js, and I have a basic style sheet for the tool-tip.

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

Christofer Eliasson · Accepted Answer · 2011-11-29 20:37:38Z

1

I guess that's because you use an id for the tooltip, and an id have to be unique, therfore jquery only selects the first one.

Try use a class-attribute instead, and select on that.

answered Nov 29, 2011 at 20:37

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Linkjuice57 Over a year ago

Thanks for your reply. How would I do that exactly? <script> $(document).ready(function() { $(".maandgem").tooltip({ tip: '.tooltip', position: 'bottom left', delay: 0 }); });

Christofer Eliasson Over a year ago

@Linkjuice57 Yeah, I guess that would do it.

Christofer Eliasson Over a year ago

@Linkjuice57 What do you want to display in the tooltip? According to the documentation, you need to have a title-attribute on the .tooltip div, that contains the text you want to show in the tooltip.

Gwenc37 · Accepted Answer · 2014-06-02 07:02:42Z

Yes, If class will be used instead of ID then it will works on loop also. I have tested it and working fine.

    <link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">  
    <script src="jquery-1.10.2.min.js"></script>  
    <script src="jquery-ui-1.10.4.custom.js"></script>  

    <script> 
        $(function() {   
            $( ".show-option" ).tooltip({     
                show: 
                {       
                    effect: "slideDown",     
                    delay: 250      
                },

                position: 
                {       
                    my: "center top",        
                    at: "center"      
                } 
            });   
        });  
    </script>
</head>
<body>
    <h2 class="show-option" title="Testing Tooltip">ToolTip</h2>
</body>

Collectives™ on Stack Overflow

jQuery Tooltip in PHP "while" loop not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related