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

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?

Answers


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.


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(){...

Need Your Help

Android - executing different functions with multiple threads

java android multithreading service timer

I am pretty new to Android programming but got some experience in other languages. I want to create an APP which is principle working like this.

UICollectionViewCell button clicked and change text on cell

ios uibutton uicollectionviewcell

I want to change the button (UIButton is inside UICollectionViewCell) text when I click on the button. How do I get the cell and the button? I have a custom cell.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.