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

Posted

技术标签:

【中文标题】折叠 div 内的引导工具提示位置【英文标题】:Bootstrap tooltip position inside collapsed div 【发布时间】:2015-07-11 07:09:22 【问题描述】:

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

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

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

谁能建议一种方法来刷新折叠 div 内的工具提示或以某种方式将其位置重置为更正输入上方的位置?

编辑-提交和调用setTooltip时放置正确,div没有折叠。

function setTooltip(obj, value, pos) 
    options = placement: pos, trigger: 'manual'

    $(obj).tooltip(options)
            .attr('data-original-title', value)
            .tooltip('fixTitle');


function displayTooltip(obj) 
    options = placement: "top", trigger: 'manual'

    $(obj).tooltip(options).tooltip('show');

【问题讨论】:

您能否提供更多代码?也许是一个 JSFiddle?真正看到你的问题在行动? 如果您可以包含 html,或者更好,请创建一个 bootply,我们将能够更好地为您提供帮助。 我创建了this bootply,它似乎工作正常...我认为我们需要查看您的 HTML 【参考方案1】:

我创建了一个示例 JSFiddle,我在其中将引导工具提示与手风琴对象结合使用。

这是你想要的吗? http://jsfiddle.net/dheLm7u6/

JQUERY:

$(function () 
    $('#buttonid').click(function()
    
        if( !$('.test1').val() ) 
              $('[data-toggle="tooltip"]').tooltip('show');
        
    );

);

【讨论】:

这很相似....我目前正在尝试使用 JSfiddle 重新创建我的设置,但没有使用它 b4+ 我的代码很复杂!我的问题是我从 div 外部的按钮和 div 折叠时设置工具提示(这是我遇到问题的时候!)。这就是为什么我拆分显示和设置功能来尝试修复它。 我尝试编辑您的小提琴以重新创建症状无济于事。我喜欢你如何将测试分配给类,我只是遍历所有表单输入并在 id 匹配时运行验证!

以上是关于折叠 div 内的引导工具提示位置的主要内容,如果未能解决你的问题,请参考以下文章

当用户专注于工具提示内容时,不要隐藏引导工具提示

为啥引导工具提示在引导模式中不起作用?

引导工具提示不应隐藏或消失在专注于工具提示内容

如何使引导树视图从父级折叠到子级?

单击时更改 Twitter 引导工具提示内容

将鼠标悬停在工具提示区域上的工具提示指令