文章/答案/技术大牛

发布

社区首页 >问答首页 >在html中动态更改按钮的工具提示

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

Stack Overflow用户

提问于 2014-04-16 18:59:02

回答 2查看 4.2K关注 0票数 0

我对html，css，javascript，jQuery非常陌生。我想显示工具提示取决于按钮。按钮显示播放图标，它应该显示‘运行’作为工具提示，当停止图标显示它应该显示‘停止’作为工具提示。此代码是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");

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-04-16 19:03:38

我进行了编辑，以显示一个完整的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>

票数 2

Stack Overflow用户

发布于 2014-04-16 20:56:04

我不太清楚为什么您需要在按钮上显示文本的工具提示，但是，这里有一个不雅致的、蛮力的小提琴供您考虑。你可以随心所欲地玩文字。

$('.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');
                }
    );

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23117925

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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