Changing the tooltip of button dynamically in html

Question

I am very much new to html, css, javascript, jQuery. I want to show tooltip depending the button. Button while showing Play icon it should show 'Run' as tooltip and when Stop icon is showing it should show 'Stop' as tool tip. This code is part of HTML template

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

In the script for one condition i have

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

and for other condition i have

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

could you set up a [jsfiddle](http://jsfiddle.net) demonstrating what's happening? — pennstatephil, Apr 16 '14 at 19:03
Yes, what is happening now? Based on the HTML in your question I'd say nothing is happening. I doubt you meant to have a space in `data-original- title` (which you _don't_ have in the script line) and you're missing a close-quote on `- title='Run>` — you should copy & paste your actual HTML source so there are no errors from re-typing. — Stephen P, Apr 16 '14 at 19:13

Aheinlein · Accepted Answer · 2014-04-17T12:13:35.083

I have edited to show a full html of a button which changes its text when clicked from Stopped to Running. The tooltip displayed is also changed on click

<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>

oops I see my "Stop" jquery selector is missing a # in front. should be $("#aBtn").attr("title", "Stop"); — Aheinlein, Apr 16 '14 at 19:59
Plain and simple, here is full html/js which will change the text and tooltip of the button when clicked. Let me know if this works for you. — Aheinlein, Apr 17 '14 at 12:14

score 1 · Answer 2 · answered Apr 16 '14 at 20:56

I'm not really sure why you need a tooltip that displays the text on a button, but, here's an inelegant, brute force FIDDLE for you to consider. You can play around with the text anyway you want.

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

Changing the tooltip of button dynamically in html

2 Answers2

Linked