Bootstrap tooltip causing screen to jump on iPad

Question

So I am using the knockout-bootstrap.js lib to assist with bootstrap tooltip initialization when using Knockout.js to apply tooltips to some KO binded HTML elements.

<a href="#" data-bind="attr: { tabindex: -1 }, tooltip: { title: buyerHelp, placement: 'top', trigger: 'click', container: 'body' }"><i class="glyphicon glyphicon-help"></i></a>

I am using trigger: 'click' instead of hover because hover tooltips do not hide themselves again once display using an iPad. When I tap a tooltip icon the tooltip shows fine but if the page is scrolled it jumps back to the top. I am not sure what direction to take with this issue.

I am currently using Bootstrap 3.0 but had the same issue with Boostrap 2.3 Thanks!

Answer 1

Is the link actually being followed when you click? As in is the page attempting to load the href value of the anchor after clicking? Since the whole tag isn't included in your example I am not sure if it is an anchor.. And I'm not sure if the knockout-bootstrap.js library ensures that data-bound events are prevented from returning (as they would on the default click event). If the anchor is trying to follow the link on click, you could try to watch the click event and prevent the event in data-bind. Such as after the tooltip:

data-bind="attr: { tabindex: -1 }, tooltip: { title: sellerHelp, placement: 'top', trigger: 'click' }, click: function(data, event) { event.preventDefault(); }"

Hopefully that helps!

Also in general it would be best to have the handler in the viewModel and have it prevented from there, rather than inline.

Would probably be good to read up on the way click events are handled in knockout as well: http://knockoutjs.com/documentation/click-binding.html