我正在处理引导工具提示实例的一些奇怪行为。
我正在使用的页面有几个按钮,当将鼠标悬停在这些按钮上时,会显示带有按钮功能描述的工具提示。工具提示都显示在按钮的顶部,除了一个按钮外,一切正常。这个按钮显示工具提示时会持续闪烁,工具提示本身会覆盖按钮的一部分(而不是完全在按钮顶部),并阻止按钮被正确单击。如果工具提示的"数据放置"从"顶部"更改为"左"/"右"/"底部",则工具提示将正确显示。
此外,给我带来问题的按钮被包裹在一个具有"float:right;"的div中在 css 中分配。我之所以提到这一点,是因为我注意到如果我删除浮动,工具提示可以正常工作。不幸的是,如果我移除浮动,按钮本身就会失去正确的定位。
虽然我可以放弃工具提示的"顶部"位置,但我希望有一个简单的技巧可以解决这个问题。有人有什么建议吗?
谢谢。
更新:
这个 StackOverflow 问题与我遇到的问题相同。我发现答案很有用。
添加到工具提示
2 3 | 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' })
所以我们必须将
来自
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.
最佳实践
话虽如此,在任何地方初始化工具提示的首选方法是使用
一劳永逸
现在,如果您正在向 DOM 动态添加或删除元素(带有工具提示),或者甚至在不重新加载它的情况下替换整个页面(即通过使用像 PJAX 这样的
修复元素上的??工具提示
这就是下面的函数派上用场的地方,它会破坏并重新创建所有工具提示。在您向/从已附加工具提示的 DOM 添加/删除元素后调用此函数。
2 3 | $('[data-toggle="tooltip"]').tooltip('dispose').tooltip({boundary: 'window'}); } |
这可能看起来很昂贵(当然确实如此),但即使在同一页面上有几十个工具提示,我也从未注意到任何性能影响。
修复模态中的工具提示
要修复模式中的工具提示,您只需将上面的函数绑定到
2 3 4 | $(document).on('shown.bs.modal', '*', function () { recreateTooltips(); }); |
我为我的问题找到了一个快速的解决方案。虽然相对较短,但我最初的工具提示描述被分成两行。偶然地,我尝试缩短工具提示文本以适合单行。完成此操作后,工具提示将正确显示。因此,我假设工具提示文本的长度以及按钮一直显示到页面右侧(以及页面顶部)的事实肯定存在问题。我暂时不会对此进行进一步调查。
我遇到了同样的问题。我发现当这些元素位于具有相对或绝对定位的容器中时,Bootstrap 的工具提示不会正确地将它们定位在"浮动"或"内联/内联块"元素上。我有一个按钮浮动在一个绝对定位的父容器内。如果我删除父级的绝对定位,工具提示会显示得非常好。 Bootstrap 需要解决这个问题。
响应迟了,但我遇到了同样的问题,并且能够通过在 html 元素的工具提示 jquery 参考中使用"容器"选项来解决它。
查看此页面和其中的 jsfiddle 链接。
您可以在此处查看工具提示容器选项的详细信息。
基于史蒂夫的回答,我发现问题在于我对字体真棒 css 的 css 引用是在引导 css 之后。引导 css 将字体真棒图标的显示属性设置为"inline-block"。
所以为了解决这个问题,我只是将 bootstrap css 引用移到 font awesome css 之后,这为我解决了闪烁问题。
这发生在内联元素上,例如
我不确定您对 Bootstrap 位有多少控制权,但听起来悬停事件一直在触发。阻止这种情况的方法是在调用之前使用 .stop() ,但我不确定这是否可行,例如:
我不知道你是否能够通过 Bootstrap 调用来做类似的事情,但它可能值得一试!
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,
我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存,也很有可能会自动创建一个保存点。至少,我可以将文档恢复到错误更改之前的状态,并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器,是否有具有等效功能的工具?例如,一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执,但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应,但我在编码时经常使用VIM,它具有自动保存功
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单,用户可以在其中添加一个唯一的电子邮件,并让电子邮件测试将其发送到该特定电子邮件。为了简单起见,我决定让测试电子邮件通过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
我想在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
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频,可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗?为此,表单应该是什么样的?目前我有类似的东西但显然它允许多项选择,而我试图将它限制为只有一个..怎么办? 最佳答案 如果要使用字符串列,让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件,但有一段代码我不完全理解,我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法,但我在插件的任何地方都找不到定义为常量的CLASS_METHODS,而且我也不确定是什么here,并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕,我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia
基本上,我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了,但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何,感谢您的帮助。附言。我在ApplicationController中定义了该方法,它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用,您需要对应用程序中的端点执行ajax调用。该路由应调用rub