How do I refresh the qtip label to display new label for specific button on hover?

Question

I have several buttons on my page and I want to show the full name on a tooltip instead of abbreviated name (which is displayed on the button) onhover/onmouseover.

So something like a button with the word USA on it, on hover, I want to use qtip to display United States of America on a label tooltip.

Here's my attempt:

JavaScript side:

        $('#USA').mouseover(function () {
           Objects.ToolTip("#USA", "United States of America");
        }).mouseout(function () {
            //  $("#USA").qtip('destroy', true);
            $('.qtip').remove();
        });

        $("#JP").mouseover(function () {
            Objects.ToolTip("#JP", "Japan");
        }).mouseout(function () {
            //  $("#JP").qtip('destroy', true);
            $('.qtip').remove();
        });

where ToolTip:

ToolTip:function(elementId,toolTipContent){
            $(elementId).parent().mouseover(function (event) {

                $(this).parent().qtip({
                    overwrite: false,
                    content: toolTipContent,
                    once: false,
                    show: {
                        event: event.type,
                        ready: true
                    },
                    position: {

                        my: 'top center',
                        at: 'top center',
                        target: 'mouse',
                        adjust: {
                            x: 0,
                            y: -35,
                            mouse: true  
                        }
                    },
                    style: {
                        classes: "qtip-tooltip-for-ellipse"
                    }
                }, event);
            });
        }

Html/css side:

<div id="countries-panel" style="margin-top: 0">
    <div style="margin-top: 10px">
        <button id="USA"  class="standard-button-with-icon" data-val-btnname="USA-btn" style="width: 70px; height: 20px" onclick="CountryBtn.Click('Cbtn')"><span class="c-button">USA</span><span class="circle c-circle" style="background-color: rgb(255,0,0)"></span></button>
    </div>

    <div style="margin-top: 10px">
        <button id="JP"  class="standard-button-with-icon" data-val-btnname="JP-btn" style="width: 70px; height: 20px" onclick="CountryBtn.Click('Cbtn')"><span class="c-button">JP</span><span class="circle c-circle" style="background-color: rgb(0,0,255)"></span></button>
    </div>
</div>

So, the problem I am having is the 'USA' full name keeps showing for all my buttons instead of the new content for each button.

So like when I'm hovering for USA button, I get United States of America. If I'm hovering on JP button, I get United States of America as well even though it's supposed to be Japan.

The code above might be confusing but it shows my attempts to remove or destroy the qtip label and reinstantiating the new label for the next button hover. However, it doesn't work. It completely deletes the qtip label and doesn't show the new label again.

So I am wondering how can I refresh the label to show different things for different buttons on my page?

Might be hard to do since I'm testing this with a lot of code on my project but I can try and see if I can get it to work via jsfiddle. But my question is is it because I'm using the same function several times for my buttons, is that why the label is only set to the first label? — Kala J, Jan 21 '15 at 17:10
The tooltip is not working in the jsfiddle :( I'm not sure how to insert jquery.qtip.min.js into jsfiddle? I'm using qtip2 v.2.2.0 and jquery 1.8.2 — Kala J, Jan 21 '15 at 17:14
This is the gist of it. I can't get it to work properly sorry: http://jsfiddle.net/6vgt8ju3/ — Kala J, Jan 21 '15 at 17:21
Here: http://jsfiddle.net/slicedtoad/6vgt8ju3/1/ that reporduces the problem I think. — DanielST, Jan 21 '15 at 17:29

DanielST · Answer 1 · 2015-01-21T17:39:21.980

1

This works now: http://jsfiddle.net/slicedtoad/6vgt8ju3/4/

You were adding a hover listener twice, basically. Once with .mouseover and once in CountryToolTip.

// Create the tooltips only when document ready
$(document).ready(function () {
    var CountryToolTip = function (elementId, toolTipContent) {

        //No more .mouseover here

        $(elementId).parent().qtip({
            overwrite: false,
            content: toolTipContent,
            once: false,
            show: {
                event: event.type,
                ready: true
            },
            position: {
                my: 'top center',
                at: 'top center',
                target: 'mouse',
                adjust: {
                    x: 0,
                    y: 10,
                    mouse: true
                }
            },
            style: {
                classes: "qtip-tooltip-for-ellipse"
            }
        }, event);
    }

    $('#USA').mouseover(function () {
        CountryToolTip("#USA", "United States of America");
    }).mouseout(function () {
        $("#USA").qtip('destroy', true);
    });

    $("#JP").mouseover(function () {
        CountryToolTip("#JP", "Japan");
    }).mouseout(function () {
        $("#JP").qtip('destroy', true);
    });
});

That is the jsfiddle code, for your app it looks like you need to define CountryToolTip like:

ToolTip:function(){...

instead of

var CountryToolTip = function(){...

edited Jan 21 '15 at 17:39

answered Jan 21 '15 at 17:33

DanielST

13,783
7
42
65

Thank you for trying to replicate the bug and fixing it. That was the bug I am getting. Someone else mentioned I just needed to remove another call to parent() and that should fix it. It did. – Kala J Jan 21 '15 at 18:07
Hey, it looks I need to look back this solution and I noticed you didn't pass in the event from the mouseover, do I still need to pass in an event in CountryTooltip()? – Kala J Feb 16 '15 at 22:25
@KalaJ hmm, looking back at that code it took me a google search to actually understand why it worked. Turns out that `event` gets passed in all event handlers implicitly. http://stackoverflow.com/a/4968278/728393 If you prefer to make it explicit: http://jsfiddle.net/slicedtoad/6vgt8ju3/6/ Might be better that way, but I'm not sure it matters – DanielST Feb 17 '15 at 14:12
Hmm very strange. I am having similar issues to what I had last time but strangely enough it works for another group of buttons but not this group of buttons. Here's my new SO post if you're interested: http://stackoverflow.com/questions/28550523/why-does-the-qtip-tooltip-appear-on-other-buttons-that-do-not-share-the-same-id . I do think you're right about me having two mouseover events but once I remove the mouseover, my app completely breaks. One error was event was not defined, so I passed the event in but it still breaks. – Kala J Feb 17 '15 at 14:59

score 1 · Accepted Answer · answered Jan 21 '15 at 17:49

1

Your code is fine till this part;

$(elementId).parent().mouseover(function (event) {

            $(this).parent().qtip({

            ....
            });
});
 .....

So basically you are calling ".parent" twice. just remove ".parent()" from $(this).parent().qtip and it will work just fine.

answered Jan 21 '15 at 17:49

Prabhu

967
7
14

You are exactly right! Why would calling parent() twice be wrong? – Kala J Jan 21 '15 at 18:05
1

@Kala you added the listener to the parent and then added the qtip to this.parent(). Meaning the parent's parent. – DanielST Jan 21 '15 at 18:15
@slicedtoad, ohhh I see. Thanks! :D Wish I can give two answers. – Kala J Jan 21 '15 at 18:24

How do I refresh the qtip label to display new label for specific button on hover?

2 Answers2