jjzjj

关于 jquery:Twitter Bootstrap 工具提示:放在按钮顶部时会闪烁,但放在左/右/底部时效果很好

codeneng 2023-03-28 原文

Twitter Bootstrap Tooltip: flickers when placed on top of button, but works fine when placed at the left/right/bottom

我正在处理引导工具提示实例的一些奇怪行为。

我正在使用的页面有几个按钮,当将鼠标悬停在这些按钮上时,会显示带有按钮功能描述的工具提示。工具提示都显示在按钮的顶部,除了一个按钮外,一切正常。这个按钮显示工具提示时会持续闪烁,工具提示本身会覆盖按钮的一部分(而不是完全在按钮顶部),并阻止按钮被正确单击。如果工具提示的"数据放置"从"顶部"更改为"左"/"右"/"底部",则工具提示将正确显示。

此外,给我带来问题的按钮被包裹在一个具有"float:right;"的div中在 css 中分配。我之所以提到这一点,是因为我注意到如果我删除浮动,工具提示可以正常工作。不幸的是,如果我移除浮动,按钮本身就会失去正确的定位。

虽然我可以放弃工具提示的"顶部"位置,但我希望有一个简单的技巧可以解决这个问题。有人有什么建议吗?

谢谢。

更新:

这个 StackOverflow 问题与我遇到的问题相同。我发现答案很有用。

  • 您可以将按钮package在一个向右浮动的元素中并且不浮动按钮吗?看看能不能解决?你可以把它放在一个元素(段落、div 等)中,而不是向右浮动,然后右对齐文本来给它想要的位置吗?
  • 该按钮实际上被包裹在一个向右浮动的元素中 - 抱歉不清楚这一点。 css 本身相当混乱;我正在处理来自 3 个不同主干视图的元素,并且正确地对它们进行排序被证明是非常乏味的。在尝试了几种方法后,我决定使用当前的 css,这可以解决问题,但很可能不是最优的。由于时间限制,如果解决方案不需要重大的 css 更改,那将是更可取的。
  • 如果你已经解决了,我建议 1)发布解决方案并自己标记它;或 2) 删除此问题。祝项目顺利。
  • 我有同样的问题,但仅限于 Chrome 浏览器,当工具提示位于 iframe 内时。


添加到工具提示 pointer-events: none; css 规则,如

1
2
3
.tooltip {
  pointer-events: none;
}

这将防止工具提示成为鼠标事件的目标并解决问题。

  • 干净,直接,像魅力一样工作。谢谢!
  • 如果工具提示被添加到超链接怎么办?这样会取消点击动作吗?
  • 这完全解决了我的问题 - 谢谢!


阅读文档

Bootstrap 4 上的文档明确解决了这个问题并提供了解决方案:

Overflow auto and scroll

Tooltip position attempts to automatically change when a parent container has overflow: auto or overflow: scroll like our .table-responsive, but still keeps the original placementa€?s positioning. To resolve, set the boundary option to anything other than default value, 'scrollParent', such as 'window':

$('#example').tooltip({ boundary: 'window' })

所以我们必须将 boundary 选项设置为 'window'.

来自 boundary 选项的文档:

Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

最佳实践

话虽如此,在任何地方初始化工具提示的首选方法是使用 '[data-toggle="tooltip"]' 作为选择器:

1
$('[data-toggle="tooltip"]').tooltip({ boundary: 'window' })

一劳永逸

现在,如果您正在向 DOM 动态添加或删除元素(带有工具提示),或者甚至在不重新加载它的情况下替换整个页面(即通过使用像 PJAX 这样的 pushState 库) - 或者如果您只是使用模式 (带有工具提示)-您必须(再次)初始化这些工具提示。

修复元素上的??工具提示

这就是下面的函数派上用场的地方,它会破坏并重新创建所有工具提示。在您向/从已附加工具提示的 DOM 添加/删除元素后调用此函数。

1
2
3
function recreateTooltips() {
    $('[data-toggle="tooltip"]').tooltip('dispose').tooltip({boundary: 'window'});
}

这可能看起来很昂贵(当然确实如此),但即使在同一页面上有几十个工具提示,我也从未注意到任何性能影响。

修复模态中的工具提示

要修复模式中的工具提示,您只需将上面的函数绑定到 'shown.bs.modal' 事件,该事件会在模式完全显示给用户后触发。

1
2
3
4
/** Recreate tooltips upon showing modal */
$(document).on('shown.bs.modal', '*', function () {
    recreateTooltips();
});

  • 为我添加边界
  • 这个解决方案听起来很棒,但它不起作用(Bootstrap 4.5)


我为我的问题找到了一个快速的解决方案。虽然相对较短,但我最初的工具提示描述被分成两行。偶然地,我尝试缩短工具提示文本以适合单行。完成此操作后,工具提示将正确显示。因此,我假设工具提示文本的长度以及按钮一直显示到页面右侧(以及页面顶部)的事实肯定存在问题。我暂时不会对此进行进一步调查。


我遇到了同样的问题。我发现当这些元素位于具有相对或绝对定位的容器中时,Bootstrap 的工具提示不会正确地将它们定位在"浮动"或"内联/内联块"元素上。我有一个按钮浮动在一个绝对定位的父容器内。如果我删除父级的绝对定位,工具提示会显示得非常好。 Bootstrap 需要解决这个问题。


响应迟了,但我遇到了同样的问题,并且能够通过在 html 元素的工具提示 jquery 参考中使用"容器"选项来解决它。

查看此页面和其中的 jsfiddle 链接。

您可以在此处查看工具提示容器选项的详细信息。


基于史蒂夫的回答,我发现问题在于我对字体真棒 css 的 css 引用是在引导 css 之后。引导 css 将字体真棒图标的显示属性设置为"inline-block"。

所以为了解决这个问题,我只是将 bootstrap css 引用移到 font awesome css 之后,这为我解决了闪烁问题。


这发生在内联元素上,例如 a 标签。将 display 属性设置为 block 可以解决问题。

  • 同样,我可以通过将属性 (container="body") 添加到我的按钮来解决此问题。


我不确定您对 Bootstrap 位有多少控制权,但听起来悬停事件一直在触发。阻止这种情况的方法是在调用之前使用 .stop() ,但我不确定这是否可行,例如:

1
$('#myelement').stop().fadeOut(200);

我不知道你是否能够通过 Bootstrap 调用来做类似的事情,但它可能值得一试!

有关关于 jquery:Twitter Bootstrap 工具提示:放在按钮顶部时会闪烁,但放在左/右/底部时效果很好的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  3. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  4. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  5. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改? - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存,也很有可能会自动创建一个保存点。至少,我可以将文档恢复到错误更改之前的状态,并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器,是否有具有等效功能的工具?例如,一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执,但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应,但我在编码时经常使用VIM,它具有自动保存功

  6. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ? - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单,用户可以在其中添加一个唯一的电子邮件,并让电子邮件测试将其发送到该特定电子邮件。为了简单起见,我决定让测试电子邮件通过ajax执行,并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  7. ruby - 是否可以将 IRB 提示配置为动态更改? - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录,但我不知道如何在每个命令后进行提示更新。最终,我想在日常工作中更多地使用IRB,让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  8. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频,可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗?为此,表单应该是什么样的?目前我有类似的东西但显然它允许多项选择,而我试图将它限制为只有一个..怎么办? 最佳答案 如果要使用字符串列,让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  9. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件,但有一段代码我不完全理解,我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法,但我在插件的任何地方都找不到定义为常量的CLASS_METHODS,而且我也不确定是什么here,并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕,我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

  10. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上,我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了,但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何,感谢您的帮助。附言。我在ApplicationController中定义了该方法,它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用,您需要对应用程序中的端点执行ajax调用。该路由应调用rub

随机推荐