參考後實作如下：
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 控件上是沒有說的，非常有用。