Tooltip for mobile screen

Is it allowed if tooltip is not having an href component? Here is my code :

<a data-toggle="tooltip" title="Please click on map of your precise location"><i class="fi flaticon-question"></i></a>

I removed the href because if I click on the tooltip, the web goes to top of the page (on mobile screen). Is there any other best practice for this?

Solution

Does it have to be an anchor at all? You should be able to just do something along the lines of.

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<i class="glyphicon glyphicon-question-sign" 
    data-toggle="tooltip" 
    data-placement="bottom" 
    title="Contextual help for mouse/touch users">
</i>
<span class="sr-only">Contextual Help for Screen Readers</span>

Unless you're help icon should go somewhere it probably shouldn't be an anchor. The only thing I've added is the sr-only block which will allow screen readers to read out your contextual help.

Alternatively you can make sure that the anchor doesn't move the page by attaching an event to it and preventing the default behaviour.

//untested!
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
  //comment the following line out to see page move on click
  $('a[data-toggle="tooltip"]').click(function(e){e.preventDefault()})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<br/><br/><br/><br/>Your icon is below here to show the lack of scrolling<br/><br/><br/><br/><br/><br/><br/>Keep going...<br/><br/><br/><br/><br/><br/><br/><br/><br/>Just a little more<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#" data-toggle="tooltip" 
title="Please click on map of your precise location">
<i class="glyphicon glyphicon-question-sign"></i>
</a>