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

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/

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.