控制无线电组的 tooltipster 工具提示位置答案

【问题标题】：controlling tooltipster tooltip position for a radio group控制无线电组的 tooltipster 工具提示位置
【发布时间】：2013-10-28 14:50:17
【问题描述】：

我设置了工具提示器来显示我的验证消息，到目前为止，除了一种情况外，它们运行良好。我有一组单选按钮，从是/否中选择是是强制性的。所以我已经设置了一个 jquery 验证方法。当我通过 firebug 进行调试时，我可以看到验证正在发生，但闪烁的消息在旁边Yes 选项，它完全掩盖了 No 选项，因为它位于它之上。

这是它的样子

这是我的工具提示器配置如何查找单选按钮

$('#iWatchEnabled').tooltipster({
    trigger: 'custom', // default is 'hover' which is no good here
    onlyOne: false,    // allow multiple tips to be open at a time
    position: 'right',  // display the tips to the right of the element
    theme: '.tooltipster-shadow',
    left:' 850px'

});

最后一个左边：'850px' 是试图覆盖我通过萤火虫看到的位置。

这里是单选按钮工具提示的萤火虫详细信息

<div class="tooltipster-base tooltipster-shadow tooltipster-fade tooltipster-fade-show" style="transition-duration: 350ms; animation-duration: 350ms; width: 298px; padding-left: 0px; padding-right: 0px; top: 125.5px; left: 675px;">
<div class="tooltipster-content">Application has to be onboarded as a pre-requisite</div>
<div class="tooltipster-arrow-right tooltipster-arrow" style="">
<span style="border-color:rgb(236, 236, 236);"></span>
</div>
</div>

任何帮助解决这个问题都会很棒。这看起来是一个看似微不足道的问题，但我有相当长的时间来尝试解决这个问题，但没有什么可展示的。

【问题讨论】：

标签： jquery validation tooltipster

【解决方案1】：

终于找到答案了

看来我的第一个设置也覆盖了我的广播组设置。

$('#onboardForm input').tooltipster({
    trigger: 'custom', // default is 'hover' which is no good here
    onlyOne: false,    // allow multiple tips to be open at a time
    position: 'right',  // display the tips to the right of the element
    theme: '.tooltipster-shadow'
});

$('#onboardForm input:radio').tooltipster({
    trigger: 'custom', // default is 'hover' which is no good here
    onlyOne: false,    // allow multiple tips to be open at a time
    position: 'right',  // display the tips to the right of the element
    theme: '.tooltipster-shadow',
    offsetX: 100
});

我添加了一个偏移量，但是我必须为其他文本字段设置单独的样式我这样做了

$('#onboardForm input:text').tooltipster({
    trigger: 'custom', // default is 'hover' which is no good here
    onlyOne: false,    // allow multiple tips to be open at a time
    position: 'right',  // display the tips to the right of the element
    theme: '.tooltipster-shadow'
});

$('#onboardForm input:radio').tooltipster({
    trigger: 'custom', // default is 'hover' which is no good here
    onlyOne: false,    // allow multiple tips to be open at a time
    position: 'right',  // display the tips to the right of the element
    theme: '.tooltipster-shadow',
    offsetX: 100
});

请注意，我在第一个配置中添加了 :text 以表明该样式仅适用于 input type="text" 元素在第二个配置中（对于我的单选按钮），我添加了一个 offsetX 并将其移动了大约 100 px

【讨论】：