Tooltip für mobilen Bildschirm

Question

Ist es erlaubt, wenn Tooltip keine href Komponente hat? Hier ist mein Code:

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

ich die href entfernt, denn wenn ich auf den Tooltip klicken, wird die Bahn oben auf der Seite (auf mobilen Bildschirm) geht. Gibt es andere Best Practices dafür?

Answer 1

Muss es überhaupt ein Anker sein? Sie sollten in der Lage sein, etwas in der Art von.

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

Wenn Sie Hilfe-Symbol sind irgendwo gehen sollte es wohl nicht ein Anker sein sollte. Das einzige, was ich hinzugefügt habe, ist der sr-only Block, der Bildschirmlesegeräten erlauben wird, Ihre kontextbezogene Hilfe auszulesen.

Alternativ können Sie sicherstellen, dass der Anker die Seite nicht bewegt, indem Sie ein Ereignis anhängen und das Standardverhalten verhindern.

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