Question

在Bootstrap网站上有静态工具提示的演示，我已经复制了生成的html来复制我项目中的工具提示，但它没有工作。尽管Bootstrap 4正在开发中，但文档可能会更好。 https://www.dropbox.com/sh/kne5wopgzeuah0u/AABKTuc3_1czzI0hIpZWPkLwa?dl=0

我已经尝试了

config: {
  'webpack-bundle': [
    '...',
    './app/bundles/Posts/startup/registration'
  ]
}

我添加了

Obs：动态示例有效。

Answer 1

您也可以在页面中插入JS代码：

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

和div可以拥有此属性

data-toggle="tooltip" data-placement="top" title="Tooltip on top"

Answer 2

您可以尝试使用Bootstrap文档中的事件侦听器。

<div class="container">

     <button id="myStaticTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Static Tooltip">
       Test
    </button>

</div>

使用此Jquery代码：

$(function () {
  $('#myStaticTooltip').tooltip('toggle')
  $('#myStaticTooltip').on('hide.bs.tooltip', function () { return false;});
  $('#myStaticTooltip').on('show.bs.tooltip', function () { return false;});
})

希望它可以提供帮助。

Answer 3

您可以尝试使用以下代码：

<div class="bd-example-tooltip-static">
    <div class="tooltip tooltip-top" role="tooltip">
        <div class="tooltip-inner">Tooltip on the top</div>
    </div>
    <div class="tooltip tooltip-right" role="tooltip">
       <div class="tooltip-inner">Tooltip on the right</div>
    </div>
    <div class="tooltip tooltip-bottom" role="tooltip">
        <div class="tooltip-inner">Tooltip on the bottom</div>
    </div>
    <div class="tooltip tooltip-left" role="tooltip">
       <div class="tooltip-inner">Tooltip on the left</div>
    </div>
</div>

我如何在bootstrap 4中制作静态工具提示

3 个答案: