移动浏览器的工具提示

Question

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

<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;
}

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

Answer 2

这是CSS唯一的解决方案。（类似于@Jamie Pate 的回答，但没有 JavaScript。）

我们可以使用伪类:hover，但我不确定所有移动浏览器在点击元素时都应用这些样式。我使用伪类:focus是因为我猜它更安全。但是，当使用伪类时，:focus我们需要添加tabindex="0"到本质上没有焦点状态的元素。

我正在使用 2 个@media查询来确保所有移动设备都是有针对性的。该(pointer: coarse)查询将针对主要输入法是“粗”的任何设备，例如手指。并且(hover: none)查询将针对主指向系统无法悬停的任何设备。

这个片段是所有需要的：

@media (pointer: coarse), (hover: none) {
      [title] {
        position: relative;
        display: inline-flex;
        justify-content: center;
      }
      [title]:focus::after {
        content: attr(title);
        position: absolute;
        top: 90%;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
      }
    }

@media (pointer: coarse), (hover: none) {
      [title] {
        position: relative;
        display: inline-flex;
        justify-content: center;
      }
      [title]:focus::after {
        content: attr(title);
        position: absolute;
        top: 90%;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
      }
    }

/*Semantic Styling*/
body {
  display: grid;
  place-items: center;
  text-align: center;
  height: 100vh;
}

a {
  height: 40px;
  width: 200px;
  background: #fa4766;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

/*Functional Styling*/
@media (pointer: coarse), (hover: none) {
  [title] {
    position: relative;
    display: flex;
    justify-content: center;
  }
  [title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: #000;
    background-color: #fff;
    border: 1px solid;
    width: fit-content;
    padding: 3px;
  }

}

显然，您需要在移动设备上打开它来测试它。 这是一个具有相同代码的 Pen。

Answer 3

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

具体来说,您可以尝试使用qTip jQuery插件,该插件具有模式模式$.click():

Answer 4

鉴于当今（2015年）有很多人使用移动浏览器，而标题仍未在移动浏览器中找到暴露形式，也许是时候不再依赖标题来获取有意义的信息了。

永远不要将其用于重要信息，但是对于有用的信息，它正变得令人怀疑，因为如果该信息有用且无法向一半用户显示，则需要找到向几乎所有用户显示的另一种方式。

对于静态页面，也许在相关控件附近有一些可见的文本，甚至是精美的文字。对于服务器生成的页面，浏览器嗅探可以仅针对移动浏览器提供。在客户端，可以使用javascript通过冒泡来捕获焦点事件，以在当前焦点元素旁边显示额外的文本。这样可以最大程度地减少占用的屏幕空间，但不一定有太多用处，因为在很多情况下，只能以立即激活其动作的方式绕过控件，而无法发现关于它，然后再使用它！

总体而言，似乎很难在移动设备上显示标题属性可能导致其消失，主要是因为需要更通用的替代方法。遗憾的是，因为移动设备可以使用一种方式来按需显示此类额外信息，而不会占用有限的屏幕空间。

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

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

另一种选择是构造脚注，因此在需要更多信息的元素/文本旁边放置[n]类型上标，并链接到页面底部列表中的解释性文本。每一个都可以有一个相似的[n]类型链接返回原始文本/元素。这样，它可以使显示整洁，但可以通过简单的方式轻松进行双向交换。有时，带有一点超链接帮助的旧的印刷媒体方式是最好的。

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

Answer 5

flavaflo的答案略为详尽：

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

HTML：

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

CSS：

.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;
}

JavaScript / jQuery：

$(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();
    });  

});

在这里演示https://jsfiddle.net/bgxC/yvs1awzk/

Answer 6

正如@cimmanon 提到的：span[title]:hover:after { content: attr(title) }在触摸屏设备上为您提供基本的工具提示。不幸的是，这存在问题，触摸屏设备上的默认 ui 行为是在按下任何非链接/uicontrol 时选择文本。

要解决选择问题，您可以添加 span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

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

• 添加position: absolute background，border，box-shadow等，使它看起来像一个提示。
• touched当用户使用任何触摸事件时，将类添加到主体（通过 js）。那么你可以在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;
}

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

Answer 7

我一直在寻找一种简单的纯 CSS 解决方案，这确实是我发现的最简单的解决方案：

<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

<span aria-label="Whats up!" data-balloon-pos="up">Hover me!</span>

工作示例：https://jsfiddle.net/5pcjbnwg/

如果您想自定义工具提示，可以在此处找到更多信息： https: //kazzkiq.github.io/balloon.css/