草庐IT

javascript - bootstrap tooltip\popover - 解决左侧放置不一致的问题

coder 2024-05-09 原文

我一直在做一个元素，我注意到我想要解决的 Bootstrap 行为中的一些不一致。

当弹出窗口(或工具提示，无论什么，它们基本相同)接近屏幕边缘时 - 如果它是右侧的，当接近边缘时 - 它会收缩以免离开屏幕(它只能在一定程度上起作用，但这通常就足够了。

当展示位置在左侧时不会发生这种情况。

即:

正确的位置:

正常宽度:

靠近边缘:

左侧位置:

正常宽度:

靠近边缘:

这些图片来自小DEMO我写信来说明这个问题。

我把源代码搞得一团糟，至今无济于事。我似乎无法弄清楚到底是什么导致了这种行为。

有什么想法吗？

附注

我正在使用 Bootstrap 3.1.1。新的 3.2 没有解决这个问题(我想避免在此时升级)。

重大更新!

经过一些挖掘，我发现这与 bootstrap 无关 - 它是简单的 css - 似乎当你绝对定位一个元素并将其推到两侧时，它会尝试并留在屏幕内。

我从来不知道这种行为，它会自动发生 - 但只会发生在你插入的方向 - 即从左边插入的 div 在到达屏幕的右边缘时会收缩，反之亦然。

碰巧的是，弹出框仅使用 left 赋值定位 - 这就是我们看到不一致行为的原因 - 当它被推到右边时它会收缩而不是另一个方向。

所以解决方案是分配权利——听起来很简单？ 没那么多。我拿了源代码并对其进行了一些操作，adding these lines (jsfiddle 中第 250 行的某处):

if (placement == 'left' && offset.left < 0) {
    var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
}

看起来很有道理吧？如果左侧的偏移量小于 0(即，它离开屏幕)，则计算窗口宽度并从中删除左侧偏移量和弹出框本身的宽度(actualWidth)，您将得到与右侧的距离。

然后，确保重置左侧偏移并应用右侧定位。 但是...它只能在某种程度上起作用——也就是说它只能在第二次起作用。

检查一下 for yourself !悬停一次，它放错了位置，将鼠标拉到一边再试一次，突然它就定位正确了。什么鬼？

编辑

好的，这似乎经常出现，所以我会说清楚:

我知道 auto 放置。我不想要它。 我想控制popover的去向，让它自动决定并不能解决问题，只是避免它而已

最佳答案

好的，我已经接近了一点。

在 css 中分配 right 后，actualWidth 和 actualHeight 将发生变化，因此您需要更新这些变量。在您的 jsfiddle 中的第 253 行附近:

if (placement == 'left' && offset.left < 0) {
    var right = (  $(window).width() + 10) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
    actualWidth  = $tip[0].offsetWidth;
    actualHeight = $tip[0].offsetHeight;
}

这在您第一次悬停时有效，但此后每次都会将 top 设置得太高，因此您无法阅读工具提示的顶部。

更新: 似乎设置了 right 值会打乱 applyPlacement 函数中的定位。要解决此问题，请在设置初始 actualWidth 和 actualHeight 之前清除 right 值(第 225 行左右):

$tip.css({ 'right': '' });
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth  = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight

关于javascript - bootstrap tooltip\popover - 解决左侧放置不一致的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24760420/

javascriptbootstrapcodestrongoffsetjquerycsstwitter-bootstraptwitter-bootstrap-tooltip

有关javascript - bootstrap tooltip\popover - 解决左侧放置不一致的问题的更多相关文章

  1. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  2. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  3. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  4. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  5. ruby - Ruby gsub 替换中的行为不一致？ - 2

    两个gsub产生不同的结果。谁能解释一下为什么？代码也可在https://gist.github.com/franklsf95/6c0f8938f28706b5644d获得.ver=9999str="\tCFBundleDevelopmentRegion\n\ten\n\tCFBundleVersion\n\t0.1.190\n\tAppID\n\t000000000000000"putsstr.gsub/(CFBundleVersion\n\t.*\.).*()/,"#{$1}#{ver}#{$2}"puts'--------'putsstr.gsub/(CFBundleVersio

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 如何更快地解决 project euler #21？ - 2

    原始问题Letd(n)bedefinedasthesumofproperdivisorsofn(numberslessthannwhichdivideevenlyinton).Ifd(a)=bandd(b)=a,whereab,thenaandbareanamicablepairandeachofaandbarecalledamicablenumbers.Forexample,theproperdivisorsof220are1,2,4,5,10,11,20,22,44,55and110;therefored(220)=284.Theproperdivisorsof284are1,2,

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby - 为什么这些方法没有解决？ - 2

    这个问题在这里已经有了答案:WhydoRubysettersneed"self."qualificationwithintheclass?(3个答案)关闭29天前。给定这段代码:classSomethingattr_accessor:my_variabledefinitialize@my_variable=0enddeffoomy_variable=my_variable+3endends=Something.news.foo我收到这个错误:test.rb:9:in`foo':undefinedmethod`+'fornil:NilClass(NoMethodError)fromtes

  10. 电脑启动后显示器黑屏怎么办？排查下面4个问题，快速解决 - 2

    电脑启动出现显示器黑屏是一个相当常见的问题。如果您遇到了这个问题，不要惊慌，因为它有很多可能的原因，可以采取一些简单的措施来解决它。在本文中，小编将介绍下面4种常见的电脑启动后显示器黑屏的原因，排查这些原因，快速解决！ 演示机型：联想Ideapad700-15ISK-ISE系统版本：Windows10一、显示器问题如果出现电脑启动后显示器黑屏的情况。那么首先您需要检查一下显示器是否正常工作。您可以通过更换另一个显示器或将当前显示器连接到另一台计算机来检查显示器是否存在问题。如果问题仍然存在，那么您可以排除显示器故障的可能性。 二、显卡问题如果您的电脑配备了独立显卡，那么显卡故障也可能是导致电脑

随机推荐