问题标签 [twitter-bootstrap-tooltip]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
3114 浏览

twitter-bootstrap-3 - 引导工具提示视口和放置

如果它适合某些包装区域,我正在尝试将 Bootstrap 工具提示放在元素的顶部。如果它不适合,那么它应该自动重新定位(例如在底部)。

视口和放置应该处理这种情况,但我不能让它们工作。我尝试以不同的方式使用视口和放置,但它失败了。

我想'#tooltip1'放在顶部,因为它适合视口。 http://jsfiddle.net/yzhow8vt/2/

0 投票
1 回答
1241 浏览

jquery - 在 Bootstrap 3 中更改工具提示的标题

我有一个字形图标,它代表我页面上小书签的“拖动到工具栏”图标。它还有一个工具提示。它工作得很好,但有一个问题;

当我悬停字形图标时,我想将“将其拖到您的工具栏”文本显示为工具提示。但是当我这样做时,在我将图标拖到我的工具栏后,它的名称也会变成“将它拖到您的工具栏”,因为浏览器会像 tooltip() 函数一样读取标题属性。我已经尝试更改锚点和跨度的标题属性,但没有奏效。

如何更改 tooltip() 函数以使其读取另一个属性作为我的工具提示文本,以便我可以将标题属性更改为我的网站名称。

这是我的代码:

并且

0 投票
1 回答
319 浏览

angularjs - Bootstrap-UI - 提示后仍显示工具提示

我有以下问题:

在我的应用程序中,每个链接都有一个工具提示(来自 bootstrap-ui)。如果单击该链接,则会出现一个警告对话框并且工具提示消失。但在 Firefox 中,工具提示仍然显示!

这是一个 plunker: plunkr

这就是我想在工具提示中使用它的方式:

功能:

确认警报窗口后,工具提示仍然显示在 Firefox 中。

有人可以帮助我,如何在 Firefox 中隐藏此工具提示?这真是愚蠢!

谢谢!

0 投票
2 回答
1157 浏览

javascript - bootstrap tooltip usage, in search field

I have 2 search fields, ( choose a place ) ( number of people) and a button Search, if the choose a place is not choosen and the search is clicked the bootstrap tooltip should say Please choose a place, But I cannot for some reason accomplish this task and need help . This is my code for the search field and button .

And this is my script

Of course the tooltip is not showing on the choose a place when the Search button is clicked, and the script is also not working.

0 投票
2 回答
8407 浏览

reactjs - 如何在 DOM 上显示之前定位和调整 React Bootstrap Tooltip 的大小?

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

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

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

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

这是问题的屏幕截图:

React Boostrap 工具提示示例

我该如何解决这个问题?

0 投票
1 回答
1372 浏览

javascript - 折叠 div 内的引导工具提示位置

我正在创建一个带有折叠面板的引导手风琴来保存表单输入。我试图在输入上方的折叠面板内创建一个工具提示以进行验证输出。

  • 提交按钮被按下它调用每个输入的 setTooltip 函数。
  • 标题面板(打开折叠内容)然后调用 displayTooltip。

问题:当面板从折叠打开时,所有工具提示都位于输入上方约 50px 处(需要折叠并打开以重新发布到正确位置)。

任何人都可以建议一种方法来刷新折叠 div 内的工具提示或以某种方式将其位置重置为输入上方的正确位置吗?

编辑 - 提交和调用 setTooltip 时放置正确,并且 div 未折叠。

0 投票
0 回答
1002 浏览

twitter-bootstrap-tooltip - 为什么 popover 不适用于 bootstrap-table?

我将 bootstrap-table 与一些 bootstrap-popover 和/或工具提示一起使用。当我调整窗口大小或使用某些表格功能(例如:搜索或切换或排序)时,弹出框或工具提示不再起作用。(例如,工具提示成为标准的 html 工具提示。)。我想念什么?还是有些问题?欢迎任何帮助!我尝试使用标准引导表,但没有发现这个问题。

我只是在这里添加了一个带有工具提示和弹出框的 JSFiddle 测试

现在可以工作了,请看这里已 解决

感谢 github 上 djhvscf 的帮助

所以对于js我有这个

对于 html

...

0 投票
2 回答
2719 浏览

twitter-bootstrap - bootstrap tooltip css和官方例子不一样

我用的是bootstrap tooltip,但是样式和官方的例子一样。
我已经导入bootstrap.js, bootstrap.css,并使用 like

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

在此处输入图像描述

我想要的是:
在此处输入图像描述

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

0 投票
2 回答
1429 浏览

css - 如何在部分隐藏的图像旁边正确定位引导工具提示

我使用无法正确定位的引导工具提示有以下页面该页面具有以下特征:

  • #outer-container是我的页面。它有固定的宽度。
  • 有很多.inner-container。它们具有固定的宽度和overflow-x: auto.
  • .inner-containers是动态生成的。(不确定是否相关,因此以下示例代码是静态的)
  • .inner-containerdiv 中有任意的 HTML,可以包含许多<img>标签
  • 每个<img>都有一个以alt文本为标题的工具提示。
  • 图像可以比它们的.inner-containerdiv更宽

这是代码段,您可以在全页运行代码段时看到问题。

上面的代码可以很好地显示工具提示,但有一个小问题。工具提示不会立即出现在截断图像之后,而是出现在隐藏的图像部分结束的位置之后,因此它看起来离图像太远了。

大图:浪费空间

当您向右滚动.inner-container时,工具提示会靠近 img,直到它靠近它。

大图完全滚动:不再浪费空间

当图像比整个屏幕更宽时,情况会变得更糟,因为现在工具提示太靠右了,现在它不仅会生成预期的滚动条,.inner-container还会在整个页面上生成滚动条。现在无法看到工具提示,因为一旦您尝试滚动工具提示就会消失。

真长图:页面外的工具提示和滚动条

现在的问题是......

有什么方法可以配置引导工具提示或使用 css 对其进行样式设置,使其始终出现在裁剪图像的边缘,就像第二张图像一样,而不是“实际”但隐藏的边缘?此外,当图像短于工具提示时.inner-container,工具提示应出现在图像旁边,而不是容器的右边缘

0 投票
2 回答
12148 浏览

javascript - Bootstrap multiple popover display and placement

I have multiple form input and text fields on which I want a popover to display when the field is in focus. Since the content of some of the popovers can be lengthy I don't want to declare the content inside the input tag. Instead I have the following:

I have the following javascript

How can I get the correct popover to display or returned in the above javascript. What if I add a data attribute to the tool-tip content to link it to each input field e.g <div class="js-tooltip" style="display:none;" data-tooltip="name"> and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution?

Also how do I get the popover to remain with the input field and auto position upon window resize. Currently it floats away when I resize the window.

Manage to figure it out myself using the above html:

Can anyone think of a more elegant solution?