Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Updating Content

Is it possible to update the content of a tool tip on the fly? I.e. when someone hovers over an icon, we want the tool tip to say "Add To Favorites", once they click the icon, we would like the copy to read "Remove from Favorites".

I have it working as follows:

// this is a favorite so clicking will remove from favorites and adjust the copy + classname
$(".show-tip.is-favorite").click(funtion() {
// run ajax to add to remove from favorites
Tipped.remove($(this));
Tipped.create($(this),'add to favorites');
$(this).removeClass("is-favorite").addClass("is-not-favorite");
});

// this is not a favorite so clicking will add to favorites and adjust the copy + classname
$(".show-tip.is-not-favorite").click(funtion() {
// run ajax to add to favorites
Tipped.remove($(this));
Tipped.create($(this),'remove from favorites');
$(this).removeClass("is-not-favorite").addClass("is-favorite");
});

Ideally, we'd like to just update the copy and keep the tool tip open as the user clicks on the icon.

Comments

  • edited August 2015
    Tipped doesn't have an update method, you could show the tooltip with the API if it was open before removing and recreating it:
    $(".show-tip.is-favorite").click(funtion() {
    var wasVisible = Tipped.visible(this);

    Tipped.remove(this);
    Tipped.create(this, 'add to favorites');

    if (wasVisible) Tipped.show(this);

    $(this).removeClass("is-favorite").addClass("is-not-favorite");
    });
    By using an inline tooltip you could update it and call Tipped.refresh():
    <span id="favorite">click</span>
    <div id='favorite-tooltip' style='display:none'>add to favorites</div>

    <script type='text/javascript'>
    $(document).ready(function() {
    Tipped.create('#favorite', { inline: 'favorite-tooltip' });

    $('#favorite').click(function() {
    var makeFavorite = !$(this).hasClass('is-favorite'),
    tooltip = $('#favorite-tooltip');

    tooltip.html((makeFavorite ? 'remove from' : 'add to') + ' favorites');
    Tipped.refresh(this);

    $(this)[(makeFavorite ? 'add' : 'remove') + 'Class']('is-favorite');
    });
    });
    </script>
    Hope that helps.
  • That's great - thanks for the update! I'll be able to use this as a work around.
Sign In or Register to comment.