Question

我转换为Bootstrap 4，由于某种原因，Bootstrap Tooltip在下面无法正常工作。我该如何解决问题？我遵循了网站上的指示。

https://getbootstrap.com/docs/4.0/components/tooltips/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="toolset">
  <a class="toolsettooltip" data-placement="top" data-toggle="tooltip" href="#" title="Delete">
    <button class="mdc-button toolsetbutton delete">
      <i class="material-icons mdc-button__icon toolsetbutton">delete</i>
    </button>
  </a>
<a class="toolsettooltip" data-placement="top" data-toggle="tooltip" href="#" title="Notification">
  <button class="mdc-button toolsetbutton notification">
    <i class="material-icons mdc-button__icon toolsetbutton">notifications
    </i></button>
  </a>
</div>

<script>$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});</script>

类似的问题：Why is my Bootstrap code not working?

Why is my bootstrap not working?

Answer 1

除了JavaScript之外，您还需要导入Bootstrap的CSS样式。除此之外，您发布的代码可以正常工作。

对于您使用的版本，应该是：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

有关更多信息，请参见Bootstrap文档的Getting Started部分。

Bootstrap工具提示不起作用：如何从4.3升级修复？

1 个答案: