Bootstrap动态工具提示绑定到输入字段?

时间:2013-04-24 20:41:38

标签: jquery twitter-bootstrap

我有一系列名为price1 [324],price2 [324],price3 [324]的输入字段,我想根据输入值生成工具提示,例如: 如果客户输入100,他们会看到80。

我试图让这项工作变得有效,并且无法以任何方式使工具提示变得动态。

http://jsfiddle.net/CtFrx/5/

这是基本形式:

<input type="text" id="nav-search" name="price1[324]" rel="tooltip" />
<input type="text" id="nav-search" name="price2[324]" rel="tooltip" />
<input type="text" id="nav-search" name="price3[324]" rel="tooltip" />

这是基本的Javascript:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

$("#nav-search").tooltip('hide')
    // The following does NOT work
    //.attr('data-original-title', 'You receive ' + ($(this).val() * .8) )

    // The following DOES work
    .attr('data-original-title', '80' )
    .tooltip('fixTitle')
    .tooltip('show');

我也无法引用动态命名的字段,但这是我认为的另一个问题。

1 个答案:

答案 0 :(得分:1)

将输入ID更改为类并尝试:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

$('.nav-search').tooltip();

$('.nav-search').on({
        focus:
           function()
           {
               $(this).attr('data-original-title', 'You receive ' + ($(this).val() * .8) )
                .tooltip('fixTitle')
                .tooltip('show');
           }
       }
    );

http://jsfiddle.net/CtFrx/19/