モバイル画面のツールチップ

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>