移动浏览器的工具提示

Question

如果我想提供更多信息，我目前设置了一些HTML的title属性：

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

然后在CSS中：

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

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

Answer 1

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

Javascript（使用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;
}

但是：ぁzxswい

Answer 2

根据您希望为用户提供的信息量，模式对话框可能是一个优雅的解决方案。

具体来说，您可以尝试使用http://jsfiddle.net/xaAN3/ jQuery插件，该插件在qTip上触发了modal模式：

Answer 3

flavaflo的回答稍微复杂一点：

• 使用预定义的div作为可以保存HTML的弹出窗口，而不是从title属性中读取
• 如果使用鼠标，则在翻转时打开/关闭
• 单击（触摸屏）打开，单击打开的弹出窗口或文档上的任何其他位置即可关闭。

HTML：

$.click()

CSS：

  <span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span>

JavaScript / jQuery：

.more_info {
    border-bottom: 1px dotted #000;
  position: relative;
    cursor: pointer;
}

.more_info .popup {
    position: absolute;
    top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    left: 0;
    max-width: 240px;
    min-width: 180px;
    z-index: 100;
    display: none;
}

在这里演示

$(document).ready(function () {

    //init pop-ups
    $(".popup").attr("data-close", false);

    //click on pop-up opener
    //pop-up is expected to be a child of opener
    $(".more_info").click(function () {
        var $title = $(this).find(".popup");
        //open if not marked for closing
        if ($title.attr("data-close") === "false") {
            $title.show();
        }
        //reset popup         
        $title.attr("data-close", false);
    });

    //mark pop-up for closing if clicked on
    //close is initiated by document.mouseup, 
    //marker will stop opener from re-opening it
    $(".popup").click(function () {
        $(this).attr("data-close",true);
    });

    //hide all pop-ups
    $(document).mouseup(function () {
        $(".popup").hide();

    });

    //show on rollover if mouse is used
    $(".more_info").mouseenter(function () {
        var $title = $(this).find(".popup");
        $title.show();
    });

    //hide on roll-out
    $(".more_info").mouseleave(function () {
        var $title = $(this).find(".popup");
        $title.hide();
    });  

});

Answer 4

正如@cimmanon所说：https://jsfiddle.net/bgxC/yvs1awzk/为您提供触摸屏设备的基本工具提示。不幸的是，这有一个问题，即触摸屏设备上的默认ui行为是在按下任何非链接/ uicontrol时选择文本。

要解决选择问题，您可以添加span[title]:hover:after { content: attr(title) }

完整的解决方案可以使用其他一些技术：

• 添加span[title] > * { user-select: none} span[title]:hover > * { user-select: auto } position: absolute，background，border等，使其看起来像工具提示。
• 当用户使用任何触摸事件时，将类box-shadow添加到body（通过js）。然后你可以在不影响桌面用户的情况下执行touched

body.touched [title]:hover ...

document.body.addEventListener('touchstart', function() {
  document.body.classList.add('touched');
});

[title] {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius:2px;
	position: relative;
}
body.touched [title] > * {
	user-select: none;
}
body.touched [title]:hover > * {
	user-select: auto
}
body.touched [title]:hover:after {
	position: absolute;
	top: 100%;
	right: -10%;
	content: attr(title);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: white;
	box-shadow: 1px 1px 3px;
	padding: 0.3em;
	z-index: 1;
}

Answer 5

任何移动浏览器**都不支持title属性，因为它会显示工具提示与桌面鼠标用户相同** *（属性本身在标记中支持）*。 它基本上只适用于有鼠标的桌面用户，只有用户不能使用键盘或屏幕阅读器。

您可以使用javascript实现与您所说的几乎相似。

Answer 6

鉴于现在很多人（2015年）使用移动浏览器，并且标题仍然没有在移动浏览器中找到一种形式的曝光，也许是时候弃用对标题的依赖来获取有意义的信息。

它永远不应该被用于关键信息，但现在它对于有用的信息变得可疑，因为如果该信息是有用的并且不能向一半用户显示，则需要找到向几乎所有用户显示它的另一种方式。

对于静态页面，可能是相关控件附近的一些可见文本，即使是精细打印。对于服务器生成的页面，浏览器嗅探可以仅为移动浏览器提供。在客户端，javascript可用于通过冒泡捕获焦点事件，以显示当前焦点元素旁边的额外文本。这样可以最大限度地减少占用的屏幕空间，但不一定有多大用处，因为在很多情况下，将焦点转移到控件只能以立即激活其动作的方式完成，绕过查找的能力关于它之前使用它！

尽管如此，似乎在移动设备上显示title属性的困难可能导致其消亡，主要是由于需要更普遍的替代方案。很遗憾，因为移动设备可以使用一种方式按需显示这样的额外信息，而不会占用有限的屏幕空间。

很久以前w3c和移动浏览器制造商对这个问题没有做任何事情似乎很奇怪。至少他们可以在长按控件时出现的菜单上显示标题文本。

就个人而言，我希望它放在右键单击/长按菜单的顶部，因为它不会超时，并且可以在所有浏览器上使用。

另一种方法是构造脚注，因此[n]类型的上标放在需要更多信息的元素/文本旁边，链接到页面底部列表中的说明文本。其中每个都可以有一个类似的[n]类型链接回原始文本/元素。这样，它使显示保持整洁，但以简单的方式提供简单的双向交换。有时，旧的印刷媒体方式，有一点点超链接帮助，是最好的。

某些浏览器已经劫持了title属性，以便为pattern属性提供帮助文本，因为如果模式与input元素中的文本不匹配，则会弹出文本。通常，它是提供正确格式的示例。

Answer 7

感谢@flavaflo的回答。这在大多数情况下都适用，但如果在同一段落中有多个标题要查找，而另一个标题通过链接打开，则未打开的链接会显示在第一个标题中。这可以通过动态更改“弹出”标题的z-index来解决：

<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>

此外，您可以通过将

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

（换行符）添加到title =''属性，将鼠标悬停在显示和单击显示多行上，然后将其转换为
以进行html单击显示：

<br />