移动网页设计：替代 HTML 标签中的 "title" 属性

Question

HTML 标签中的 title="" 属性是否有适用于移动浏览器的替代方法？

Answer 1

没有替代方案，因为title属性会触发工具提示 on hover，但您不能hover 在移动浏览器中（对于智能手机）。在移动浏览器中悬停的替代操作可以是 hold。所以你可以使用 jquery 来做这样的事情：

HTML:

<div id="x" title="Hello World">Hold this element</div>

jquery:

$('#x').tooltip({trigger: 'manual'});
$('#x').on("taphold",function(){
    $(this).tooltip('show');
});

注意：jquery、jquery移动和对于此示例，bootstrap（js 和 css）需要。如果需要，您可以使用任何其他 css 库或自己制作工具提示，但您明白了...

Answer 2

A CSS 唯一的选择是使用 :active 状态和 :after 或 :before 伪元素并使用内容的 title 属性，示例：

.element:active:after{
  content:attr(title);
}

您可能想要设置样式以模拟工具提示！

Answer 3

我已经使用以下代码解决了这个问题。

  $(document).ready(function () {

$('.likeIcon').tooltip({trigger: 'manual'});
$('.likeIcon').on("taphold",function(){
    $(this).tooltip('show');
});
});

移动网页设计：替代 HTML 标签中的 "title" 属性

Mobile web-design: alternative to "title" atribute in HTML tags

html

mobile-browser