手機屏幕工具提示

Question

如果工具提示沒有href組件，是否允許使用？ 這裏是我的代碼：

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

我刪除了href因爲如果我點擊工具提示，網頁轉到頁的頂部（手機屏幕上）。有沒有其他的最佳做法呢？

Answer 1

它是否必須是錨？你應該能夠做些什麼。

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

除非你幫助圖標應該去的地方，它可能不應該是一個錨。我添加的唯一東西是sr-only區塊，它將允許屏幕閱讀器讀出您的上下文幫助。

或者，您可以確保錨點不會通過向其中附加事件來移動頁面並防止默認行爲。

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