Reputation: 3864
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.
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
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');
}
}
);
Upvotes: 1