移动浏览器的工具提示 [英] Tooltips for mobile browsers

问题描述

如果我想提供更多信息，我现在设置一些HTML的标题属性：

 < p>< span class =more_infotitle =也称为下划线>下划线< / span>字符在这里使用< / p> 
  

然后在CSS中：

  .more_info {
 border-bottom：1px dotted; 
} 
  

将鼠标移动到一个小的弹出框有更多的信息。但在移动浏览器上，我没有得到那个工具提示。 title 属性似乎没有效果。在移动浏览器中提供更多关于文本信息的正确方法是什么？与上面相同，但使用Javascript来监听点击，然后显示一个工具提示对话框？是否有任何本机机制？

解决方案

您可以使用Javascript来伪造标题工具提示行为。当您在具有标题属性的元素上单击/选项卡时，具有标题文本的子元素将被追加。

Javascript（使用jQuery完成）：

 <$ c （$标题）; $（$标题）; 
如果（！$标题。 （'title'）+'< / span>'）; $ b（'） $ b $ else $ {
 $ title.remove（）; 
} 
}）; 
  

CSS：

  .more_info {
 border-bottom：1px dotted; 
职位：亲属; 
} 
 
 .more_info .title {
 position：absolute; 
 top：20px; 
背景：银色; 
 padding：4px; 
剩下：0; 
 white-space：nowrap; 
} 
  

演示： http://jsfiddle.net/xaAN3/

I currently set the title attribute of some HTML if I want to provide more information:

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>

Then in CSS:

.more_info {
  border-bottom: 1px dotted;
}

Works very nice, visual indicator to move the mouse over and then a little popup with more information. But on mobile browsers, I don't get that tooltip. title attributes don't seem to have an effect. What's the proper way to give more information on a piece of text in a mobile browser? Same as above but use Javascript to listen for a click and then display a tooltip-looking dialog? Is there any native mechanism?

解决方案

You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.

Javascript (done with jQuery):

$("span[title]").click(function () {
  var $title = $(this).find(".title");
  if (!$title.length) {
    $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
  } else {
    $title.remove();
  }
});​

CSS:

.more_info {
  border-bottom: 1px dotted;
  position: relative;
}

.more_info .title {
  position: absolute;
  top: 20px;
  background: silver;
  padding: 4px;
  left: 0;
  white-space: nowrap;
}

Demo: http://jsfiddle.net/xaAN3/

这篇关于移动浏览器的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！