手机html 一直处于hover,手机端实现Tooltip (Hover)

参考后实现如下：

Html: 用了angularjs的ng-repeat

{{Qus.qus}}

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');

});

};

之前还尝试使用过jquery-ui的Tooltip，iPhone也是不好用但是发现这篇文章非常好。

解决 Jquery UI Tooltip 用在Select 的BUG

这是我用jquery-ui时的写法，因为给所有document都响应tooltip事件，导致只要有title的都会显示。

文字文字文字

$(function() {

$( document ).tooltip({

position: {

my: "left bottom-10",

my: "left bottom",

at: "left top"

// using: function( position, feedback ) {

// $( this ).css( position );

// $( "

" )

// .addClass( "arrow" )

// .addClass( feedback.vertical )

// .addClass( feedback.horizontal )

// .appendTo( this );

// }

}}

);}

);

文章里这种改法可以过滤我们想要响应hover的到底是什么元素。

1

2

3

$('#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 控件上是没有说的，非常有用。