How to have a tooltip change when its anchor is clicked?

0
votes

I'm working on a design in which the user can click a Glyphicon anchor and it will copy text to their clipboard. I want the tooltip to change when the button is clicked though. So when they hover over the button, it will display "Copy to Clipboard" but then after they click it, the tooltip will change to "Copied!". 

<div style='margin: 20px;'>
    <a id='copy-button' href='#' class='my-tool-tip' data-toggle="tooltip"
       data-placement="right" title="Copy to Clipboard">
        <i class='glyphicon glyphicon-link'></i>
    </a>
</div>

This is how GitHub's UI behaves when forking a repository.

End Result

I have the copying functionality working, and the initial hover tooltip, I cannot figure out how to make the change on click. I've also created a jsfiddle to help describe what I'm saying. Thanks in advance!

http://jsfiddle.net/t9Ku6/381/

3
javascriptjqueryhtmlcsstooltip

3 Answers

2
votes

What you're looking for is a click() event in jQuery that updates the tooltip's data-original-title attribute:

$("a.my-tool-tip").click(function(){
    $("a.my-tool-tip").attr('data-original-title', 'Copied');
});

Note that this can be a little buggy getting the new title to come through, so you may need to close and open the tooltip again:

$("a.my-tool-tip").click(function(){
    $("a.my-tool-tip").attr('data-original-title', 'Copied');
    $("a.my-tool-tip").tooltip('show');
});

I've created a fiddle showcasing this here.

0
votes

In order for you to achieve the same effect, you can use this jQuery snippet:

$("a.my-tool-tip").tooltip();
$("#copy-button").on('click', function() {
  var tooltip = $(this);
  tooltip.attr('data-original-title', 'Copied!');
  $("a.my-tool-tip").tooltip('show');
});

To toggle the view of the tooltip, you only need to use .show().

Here is a working Fiddle.

0
votes

jQuery supports click functions set on an element. Combine that with some of bootstrap tooltip methods and you are golden.

jQuery

$('#copy-button').click(function(){
   $(this).attr( "data-original-title", "Copied!" );
   $(this).tooltip('show');
})

jsfiddle