如何在切换类中显示不同的工具提示文本

Question

I've a "Show" button. When user click on that button, a hidden div will appear and that show button convert to "Hide" button. At the time of hover on "Show" button icon, a tooltip wil come that say: "Show All". Now, I need, when that "Show" button icon convert to "Hide" button icon, tooltip text will also converted into "Hide All" . How can I make this? Here is my fiddle work

$('.show').click(function() {
    $(".text").toggle();
    $(this).toggleClass('hide');
})

Answer 1

var toggleState = false;

$('.show').click(function() {
    $('.text').toggle();
    $(this).toggleClass('hide').attr('title', toggleState ? 'Show All' : 'Hide All');
    toggleState = !toggleState;
});

This swaps toggleState boolean to true and false each click. So first time it is false so it sets title to 'Hide All'. Next time it is true so it sets to 'Show All'. And so on.

Fiddle: http://jsfiddle.net/y8ZTj/1/