SWL
SWL

Reputation: 3864

Bootstrap dynamic tooltip tied to input field?

I have a series of input fields named price1[324], price2[324], price3[324] that I would like to generate tooltips based on their input value e.g. if a customer types 100, they'll see 80.

I've tried to get this working and can't get the tooltip to be dynamic in any manner.

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

Here's the basic form:

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

And here's the basic 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');

I'm also having trouble referring to a field that is named dynamically named, but that's a separate question me thinks.

Upvotes: 1

Views: 1703

Answers (1)

kinet
kinet

Reputation: 1780

Change the input ids to classes and try this:

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

Upvotes: 1

Related Questions