手机端实现Tooltip (Hover)
2019-01-22 本文已影响0人
壹只很拽的猫
首先参考了这篇文章：5行JS自定义title提示效果（Tooltip）
参考后实现如下：
Html: 用了angularjs的ng-repeat
<div id="question_{{$index}}" class="questiontext" tooltip-context="{{Qus.hover}}">{{Qus.qus}}</div>
css:
.questiontext{
margin-left: 35px;
padding-top: 2px;
display: inline-block;
min-width:400px;
}
[tooltip-content]{
position:relative;
}
[tooltip-content]:after{
content:attr(tooltip-content);
position:absolute;
left:0%;
bottom:100%;
visibility:hidden;
max-width:600px;
padding:1px 8px !important;
border-radius:0;
border:1px solid #888 !important;
background:white;
color:#666;
box-shadow:5px 5px 5px -2px #888888;
}
[tooltip-content]:hover:after{
transition-delay:100ms;
visibility:visible;
opacity:1;
}
然后发现iPhone手机点击后仍然不显示提示文字。
参考了这篇文章解决了问题。 苹果手机无法识别hover的解决方案
在html页面后面加上
var mobileHover = function () {
$('*').on('touchstart', function () {
$(this).trigger('hover');
}).on('touchend', function () {
$(this).trigger('hover');
});
};
在实现过程中又找到了几个现成的插件亲测可用：
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的都会显示。
<div title="hover后显示的内容">文字文字文字 </div>
$(function() {
$( document ).tooltip({
position: {
my: "left bottom-10",
my: "left bottom",
at: "left top"
// using: function( position, feedback ) {
// $( this ).css( position );
// $( "<div>" )
// .addClass( "arrow" )
// .addClass( feedback.vertical )
// .addClass( feedback.horizontal )
// .appendTo( this );
// }
}}
);}
);
文章里这种改法可以过滤我们想要响应hover的到底是什么元素。
<body>
<select id="Dropdown" data-title="TESTING">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
$('#Dropdown').tooltip({
items: "[data-title]",
content: function() { return this.getAttribute("data-title"); },
position: {
my: "left top",
at: "right bottom+5"
}
});
items: "[data-title]",
content: function() { return this.getAttribute("data-title"); },
这部分内容jQuery-UI 控件上是没有说的，非常有用。
这篇文章没细看
ontouchstart实现手机触屏中的hover效果
