Question

我想向已禁用的元素添加工具提示，我知道它需要div，但这不会出现在正确的位置。 See description here

上图显示工具提示未显示在禁用按钮的顶部。我该如何解决？

以下是工具提示的代码：

<div data-toggle="tooltip" title="disabled Tooltip">
  <button class="btn btn-default" disabled type="button"></button>
</div>

Answer 1

HTML

<button type="button" class="btn btn-default disabled" data-toggle="tooltip" data-placement="bottom" title="Tooltip on left">Tooltip on bottom</button>

JS

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Codepen：

http://codepen.io/swapnaranjitanayak/pen/YppoqP

Answer 2

使用假div包装器更新了答案以触发工具提示事件。

$(function () {
  //select the class to toggle the tooltip
  $('.custom-wrapper').tooltip();
})

.custom-wrapper {
  display: inline-block;
  margin: 20%;
}

.custom-wrapper .btn[disabled] {
  pointer-events: none;
}

.custom-wrapper.disabled {
  cursor: not-allowed;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <br>
  <div class="custom-wrapper disabled" title="I'm disabled">
    <button class="btn btn-default" disabled>button disabled</button>
  </div>
</div>

上面的代码正常工作，但您不必在放置工具提示数据的地方添加div，您可以直接将其注入按钮内。现在，查看按钮，由于disabled属性，它不会触发工具提示等事件。删除已禁用的属性，只需在class内使用它即可。

请记住：事件不会触发已禁用的元素。

更改

<button class="btn btn-default" disabled type="button"></button>

到此

<button class="btn btn-default disabled" type="button" data-toggle="tooltip" title="Hi I am disabled"></button>

bootstrap禁用元素的工具提示无法显示在正确的位置

2 个答案: