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

How to show different tooltip text at toggle class

本文关键字：工具提示 文本 显示 toggle      更新时间：2023-09-26

我有一个"Show"按钮。当用户单击该按钮时，将出现一个隐藏的div，并且显示按钮转换为"隐藏"按钮。当鼠标停留在"显示"按钮图标上时，会出现一个提示:"显示全部"。现在，我需要，当"显示"按钮图标转换为"隐藏"按钮图标时，工具提示文本也将转换为"隐藏所有"。我该怎么做呢?这是我的小提琴作品

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

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

每次点击将toggleState布尔值切换为true和false。第一次它是false所以它设置title为" Hide All "下次它是真的，所以它设置为'Show All'。等等。

小提琴:http://jsfiddle.net/y8ZTj/1/

相关文章：