用获得焦点onfocus和失去焦点onblur事件
<html><head>
<script>
function show(){
var test=document.getElementById("uname").value
if(test==null || test==""){
document.getElementById("abc").style.display=''
}else{
document.getElementById("abc").style.display='none'
}
}
function hide(){
document.getElementById("abc").style.display='none'
}
</script>
</head>
<body>
<input id="uname" type="text" onblur="show()" onfocus="hide()"/><span id="abc">请输入名称</span>
</body>
</html>
首先参考了这篇文章： 5行JS自定义title提示效果（Tooltip）
参考后实现如下：
Html: 用了angularjs的ng-repeat
css:
然后发现iPhone手机点击后仍然不显示提示文字。
参考了这篇文章解决了问题。 苹果手机无法识别hover的解决方案
在html页面后面加上
在实现过程中又找到了几个现成的插件亲测可用：
Microtip.css 纯css3 Tooltip工具提示样式
Hint.css 纯CSS实现的Tooltip提示 - Hint.css
纯css3 Tooltip工具提示样式
tootik
之前还尝试使用过jquery-ui的Tooltip，iPhone也是不好用但是发现这篇文章非常好。
解决 Jquery UI Tooltip 用在Select 的BUG
这是我用jquery-ui时的写法，因为给所有document都响应tooltip事件，导致只要有title的都会显示。
文章里这种改法可以过滤我们想要响应hover的到底是什么元素。
这部分内容jQuery-UI 控件上是没有说的，非常有用。
这篇文章没细看
ontouchstart实现手机触屏中的hover效果
不显示的问题看是不是界面背景覆盖了，排查一下。div class="div-test container">
<select class="form-control">
<option data-toggle='tooltip' data-placement='left' data-original-title='hello world 1'>test1</option>
<option data-toggle='tooltip' data-placement='left' data-original-title='hello world 2'>test2</option>
<option data-toggle='tooltip' data-placement='left' data-original-title='hello world 3'>test3</option>
</select>
<!--this can work
<button data-toggle='tooltip' data-placement='left' data-original-title='hello world 1' class="btn">click</button>
-->
</div>
<script>
$('[data-toggle="tooltip"]').tooltip({html:true})
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）