标签: twitter-bootstrap-tooltip

我正在使用 bootstrap-vue 在 b-table 上显示我的数据，我截断了长文本，并使用 title prop 将鼠标悬停在其上时显示原始文本。它与客户 css 配合得很好，但我想使用 b-tooltip

  <b-table hover  sticky-header outlined 
show-empty
      small
      stacked="md"
      :items="apiitems"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      :filter="filter"
      :filterIncludedFields="filterOn"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      :sort-direction="sortDirection"
      @filtered="onFiltered">
   <template v-slot:cell()="data">
        <span :title='data.value'>{{ data.value}}</span>
      </template>
 </b-table>

   fields: [
        { key: 'actions', label: 'Actions' , class: 'truncate1'},
   
         {key: 'key3',     label: 'label 3'    , sortable: true, class: 'truncate1'},
         {key: 'key4',      label: 'lable 4'    , sortable: true, class: 'truncate1'},

         {key: 'keyn',      label: 'lable n'    , sortable: true, class: 'truncate1'},
      ],

    <style>
    .truncate1 {
        max-width: …

我正在使用Bootstrap tooltip.js脚本而没有其余的Bootstrap(v3).

我的工具提示准备就绪:

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

一切似乎都没问题但是当我悬停我的元素时,我遇到了一个jQuery错误:

TypeError: undefined is not a function (evaluating '$tip
                .one('bsTransitionEnd', complete)
                .emulateTransitionEnd(Tooltip.TRANSITION_DURATION)')

缺什么 ？

我正在尝试在使用引导工具提示的页面上嵌入Juicer.io社交订阅源.出于某种原因,加载juicer embed JS(//assets.juicer.io/embed.js)打破了初始化Bootstrap工具提示的JS.直接来自bootstrap的代码是:

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

请参阅http://supplybank.creativeforthepeople.org/about/our-story上的示例

我得到的错误是,"Uncaught TypeError:$(...).tooltip不是一个函数." 我试过用不同的顺序加载它们,没有运气.知道为什么会发生这种情况或如何解决？

谢谢!

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<span class='fas fa-print' data-toggle='tooltip' data-placement='bottom' title='Print'>Printing</span>

在这段代码中,span有一个tooltip切换,当我将鼠标悬停在它上面时,

它告诉我,Bootstrap Tooltip然后Standard Tooltip直接显示它,b

他们两个都显示出来,究竟是什么问题？

我有一个反应引导工具提示,除非我靠近窗口的边缘,否则效果很好.在这种情况下,我希望工具提示不会被切断,但需要调整大小以适应全文并在所有方面都有边框.

我还希望工具提示箭头指向触发元素的正上方(在我的例子中是'i'图标).

我的猜测是,这需要ReactBootstrap.Tooltip在渲染后使用DOM .我需要能够计算它的当前大小和窗口顶部和左侧偏移位置,然后重新定位/重新调整大小.

这是我当前的代码(在CoffeeScript中):

define [
  'jquery',
  'es6-shim',
  'react',
  'react-bootstrap'
], ($, _shim, React, ReactBootstrap) ->

  {div, i, h2} = React.DOM

  ToolTipHint = React.createFactory(
    React.createClass

      render: ->
        tooltip = ReactBootstrap.Tooltip className: 'hint-content',
          h2 className: 'hint-title', @props.fieldName
          div className: 'hint-text', @props.tooltip

        ReactBootstrap.OverlayTrigger(
          trigger: ['hover']
          placement: 'top'
          overlay: tooltip
          delayShow: 300
          deplayHide: 150,
            div className: 'hint-icon-container',
              i className: 'gg-icon-tooltip hint-icon'
        )
  )

这是问题的截图:

我该如何解决这个问题？

最近，当我尝试在 title 属性中添加一些 html 代码时，我遇到了 Bootstrap 3 Tooltip 的问题。它向我展示了纯 html 标签代码。

这是问题所在

使用Bootstrap工具提示时遇到一些困难,特别是让它们隐藏在向后导航上.

我在Rails 5 w/Turbolinks上.

这是发生的事情:

1. 我单击一个具有Bootstrap工具提示的链接
2. 该链接将我带到一个新页面
3. 我导航回浏览器中的原始页面(后退按钮)
4. 我在步骤1中单击的链接的工具提示处于活动/显示状态,无法隐藏

我已经尝试将工具提示放在链接内的元素(图像)上,但结果是一样的.

JS:

$(document).on('turbolinks:load', function(event) {
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  });
})

rails视图助手:

<%= link_to sample_path, data: { toggle: :tooltip, placement: :bottom }, title: "Title to display" do %>
  <%= image_tag "image-src-url", alt: "Alt goes here" %>
<% end %>

HTML输出:

<a data-toggle="tooltip" data-placement="bottom" title="" href="/sample-path" data-original-title="Title to display">
  <img alt="Alt goes here" src="image-src-url">
</a>

更新:

点击其上/内有工具提示的链接可能会出现问题.我只是尝试在新选项卡中打开链接(因此没有向后导航,只关闭新选项卡),工具提示仍保持活动状态,直到在原始页面上单击其他链接.

这是没有阴影的工具提示箭头：

我正在尝试对其进行阴影处理，但由于箭头是由边界构成的，因此我一直无法呈现正确的结果。得到以下内容：

任何想法如何将箭头部分的阴影集成到工具提示的其余部分？（下面的片段）

检查了以下内容和其他一些内容，但找不到特定于阴影的场景。

谢谢你。

$('[data-toggle="tooltip"]').tooltip('show');

html body {
  background: #eee;
}

button.btn {
  margin-top: 100px;
}

.tooltip-inner {
  background-color: white !important;
  color: gray !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

.bs-tooltip-right .arrow::before {
  border-right-color: white !important;
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

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

<button type="button" class="btn btn-secondary" …

我用的是bootstrap tooltip，但是风格和官方示例不一样。
我已经导入bootstrap.js, bootstrap.css并使用类似

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

但工具提示样式显示如下：

我想要的是：

那么有人可以告诉我我错过了什么吗？谢谢
http://plnkr.co/edit/K21dTDcDqAUmasi3yrDd?p=preview