手机屏幕工具提示

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>