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

时间:2013-10-28 14:50:17

标签: jquery validation tooltipster

我有工具提示器设置来显示我的验证消息,到目前为止它们工作正常,除了一个案例。 我有一组单选按钮,从Yes / no中选择Yes是必需的。所以我已经设置了相同的jquery验证方法。当我通过firebug进行调试时,我可以看到验证发生但是闪烁的消息是旁边的选项,它完全掩盖了选项,因为它位于其上方。

以下是它的外观

enter image description here

这是我的tooltipster配置如何查找单选按钮

$('#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'试图覆盖我通过萤火虫看到的位置。

以下是单选按钮工具提示的firebug详细信息

<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>

解决这个问题的任何帮助都会很棒。看起来似乎是一个微不足道的问题,但我有一段时间试图做到这一点,但没有什么可以表现出来的。

1 个答案:

答案 0 :(得分:2)

我终于找到了答案

似乎我的第一个设置也覆盖了我的广播组设置。

$('#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