Question

我是html，css，javascript，jQuery的新手。我想根据按钮显示工具提示。显示播放图标时按钮应显示＆＃39;运行＆＃39;作为工具提示，当显示停止图标时，它应显示＆＃39;停止＆＃39;作为工具提示。此代码是HTML模板的一部分

<div class='btn-group'>
    <button class='btn btn-inverse playstop' rel='tooltip' 
    data-original-title='Run><i class='icon-play'></i></button>
</div>

在一个条件的脚本中我有

$(".icon-stop", $this.element).attr("data-original-title", "Run");
$(".icon-stop", $this.element).removeClass("icon-stop").addClass("icon-play");

和我有其他条件

$(".icon-play", $this.element).attr("title", "Stop");
$(".icon-play", $this.element).removeClass("icon-play").addClass("icon-stop");

Answer 1

我已编辑显示按钮的完整html，当从“已停止”更改为“正在运行”时，该按钮会更改其文本。显示的工具提示也会在单击

时更改

<html>
<head>
<meta charset="ISO-8859-1">
<title>TestingStuff</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<script>
    $(document).ready(function(){
        $("#aBtn").click(function(){
            if($("#aBtn").html() == "Stopped"){
                $("#aBtn").html("Running");
                $("#aBtn").attr("title","Running");
            }
            else{
                $("#aBtn").html("Stopped");
                $("#aBtn").attr("title","Stopped");
            }               
        });
    });
</script>
<body>
    <div>
        <button id="aBtn" title="Stopped">Stopped</button>
    </div>
</body>
</html>

Answer 2

我不确定为什么你需要一个工具提示来显示按钮上的文字，但是，这是一个不优雅，蛮力FIDDLE供你考虑。无论如何，你都可以随意使用文本。

JS

$('.playbutton').html('STOP');
$('.tooltip').html('STOP');

$('.playbutton').on('click', function(){
    if ( $('.playbutton').html() == "PLAY" )
    {
     $('.playbutton').html('STOP');
     $('.tooltip').html('STOP');
     }
     else
    {
     $('.playbutton').html('PLAY');
     $('.tooltip').html('PLAY');
     }
});

$('.playbutton').hover(
    function(){
               $('.tooltip').css('display', 'block');
              },
    function(){
               $('.tooltip').css('display', 'none');
                }
    );

在html中动态更改按钮的工具提示

2 个答案: