Question

单击按钮时是否可以更改某些元素上的工具提示？ DIV有一些工具提示DIV BUTTON

用户点击按钮后： DIV与其他工具提示DIV BUTTON

Answer 1

我写了这个，但它不是用bootstrap工具提示

$(".switch").click(function() {
        $(".tooltip").toggle();
        if ($("#tp1").text() == "Active") {
            $("#tp1").text("Stop");
        }
        else {
            $("#tp1").text("Active");
        }
    });

<div class="switch">
    <input type="checkbox">
    <label><i class="glyphicon glyphicon-off"></i></label>
</div> <div class="tooltip fade bottom in" style="display: block;top: 52px;width: 115px;left: 16.5px;"><div class="tooltip-arrow"></div><div id="tp1" class="tooltip-inner">Active</div></div>

Answer 2

我有一个最好的工作代码给你！请尝试以下代码。

$(function() {
  var $toolTip = $('#tooltip-example');
  var originalTitle = $toolTip.attr('title');
  $toolTip.tooltip({placement: "bottom"});

  $toolTip.click(function() {
    $toolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show');
  });
  
  $(document).on("mouseout","#tooltip-example",function()
  {
    $toolTip.attr('title',originalTitle).tooltip('fixTitle').tooltip('show');
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button>

Bootstrap工具提示更改

2 个答案: