移动浏览器的工具提示答案

【问题标题】：Tooltips for mobile browsers移动浏览器的工具提示
【发布时间】：2012-09-14 09:02:18
【问题描述】：

如果我想提供更多信息，我目前设置了一些 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 来监听点击，然后显示一个类似于工具提示的对话框？有没有原生机制？

【问题讨论】：

您是否希望能够用手指悬停？
@sethflowers - 好问题:)。当然，我希望能够将手指放在title 属性元素上并看到工具提示。由于手机还无法检测到悬停，我预计也需要在屏幕上按下。因为我确实正确设置了title 属性，所以我也有点期望移动浏览器能够智能地处理这个问题。也许某种指示器有一个工具提示和一种查看它的方法......或者它可能会自动出现，直到你点击其他地方......我想我没想到浏览器会忽略我的 HTML。
不幸的是，这似乎不是移动浏览器的工作方式:(。不过会很好
对于它的价值，CSS悬停可以通过点击/点击注册，只要它们不附加到链接或表单......至少它们与Opera Mobile模拟器和Android一起使用模拟器。无法评论 iPhone 或真实设备。所以span:hover:after { content: attr(title) } 会透露更多信息。
@cimmanon，所以您是说上面的代码在 Opera 和 Android 移动模拟浏览器中单击即可工作？我在 iPhone 上试过，但没有。你提到的span:hover:after css，应该也可以在 iPhone 上使用？

标签： mobile mobile-website tooltip html

【解决方案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/

【讨论】：

这看起来可能为我提供了一个解决方案 - 但是，这可以修改为不必使用 .title 吗？
这看起来很棒，但是当我使用它时，提示文本出现在任何地方都不需要带有我刚刚单击的标题的元素。如何修改它以使其显示在我单击的元素附近。
这可以工作，但在涉及多个段落时会搞砸......请参阅小提琴：jsfiddle.net/xaAN3/378
您应该摆脱 more_info 类并改用属性选择器！ :) developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
如果你想要和 title 一样的行为，最好使用 mouseleave 和 mouseenter。

【解决方案2】：

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

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

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

只需这个 sn-p：

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

}

&lt;a title="this is the Title text" tabindex="0"&gt;Tag with Title&lt;/a&gt;

显然，您需要在移动设备上打开它来测试它。 Here is a Pen with the same code.

【讨论】：

我确实更喜欢 css 选项而不是使用 javascript，但是，您的 sn-p 不够通用。例如，它将如何应用于如下内联元素：<p>This sentance has an <abbr title="abbreviation">abbr</abbr> in it.</p> 我一直在尝试应用它，但似乎还没有掌握它。此外，svg 中有 <title> 标签，我也想将其应用到。
@LadyAleena 我将display: flex 切换为inline-flex，它适用于您的示例。另请注意，我使用flex 的唯一原因是将标题元素居中。然而，display: inline-block 工作得很好，只是稍微不那么漂亮。
tabindex 是如何与您提供的 css 绑定的。看来没有tabindex，css 就无法工作。
@LadyAleena tabindex 使元素可聚焦。或者，伪类:hover 可以不使用tabindex
哇！这应该是浏览器的默认行为！ ???

【解决方案3】：

flavaflo 的回答稍微详细一点：

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

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/

【讨论】：

【解决方案4】：

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

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

对于静态页面，可能是相关控件附近的一些可见文本，甚至是精美的印刷品。对于服务器生成的页面，浏览器嗅探只能为移动浏览器提供。在客户端，javascript 可以用来捕获焦点事件，通过冒泡，在当前焦点元素旁边显示额外的文本。这将最小化占用的屏幕空间，但不一定有用，因为在很多情况下，将焦点放在控件上只能以立即激活其操作的方式完成，绕过查找的能力使用前先了解一下！

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

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

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

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

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

【讨论】：

对于某些页面，脚注列表不是一个坏主意。但是，对于某些页面，它会创建一个很长的列表。例如，我正在处理具有 121 个 <abbr> 标记的东西，每个标记都有自己的 title 属性。最重要的是，我使用的每个锚点都有一个title，我的网站上有超过 100 个页面，每个页面的锚点都带有title。因此，对于这一页，我将有一个包含 200 多个项目的脚注列表。因此，移动设备上的脚注列表会使页面变得相当长，具体取决于有多少元素有标题。
@LadyAleena。如此多的abbr 标签的替代方案是词汇表页面，指向它的链接在新选项卡中打开词汇表，因为有这么多，读者很可能会看到更多的扩展。

【解决方案5】：

根据您想向用户提供多少信息，模态对话框可能是一个不错的解决方案。

具体来说，你可以试试qTip jQuery 插件，它在$.click() 上触发了modal 模式：

【讨论】：

【解决方案6】：

正如@cimmanon 提到的：span[title]:hover:after { content: attr(title) } 为您提供了关于触摸屏设备的基本工具提示。不幸的是，触摸屏设备上的默认用户界面行为是在按下任何非链接/用户界面控件时选择文本。

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

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

添加position: absolutebackground、border、box-shadow 等使其看起来像一个工具提示。
当用户使用任何触摸事件时，将touched 类添加到body（通过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;
}

&lt;div&gt;Some text where a portion has a &lt;span title="here's your tooltip"&gt;tooltip&lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

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

如你所说，你可以用 javascript 实现几乎类似的效果。

【讨论】：

有没有好的 Javascript 或 jQuery 库可以用于此目的？
我不知道，但如果不在任何库中，从头开始实现也不是太难。
支持title属性。请求的特定交互不是。这是一个重要的区别。
基本问题是鼠标悬停在元素上时会显示工具提示，但移动设备不提供“悬停”方式。当您触摸屏幕时，它或者是手势的开始（滑动滚动、捏合缩放等），或者如果您不立即移动，它就是单击。也许有一天他们会有办法检测悬在离屏幕一英寸远的手指。
@at。我的建议是一个 jQuery 插件，将工具提示（或模态）文本作为元素的 title 属性。

【解决方案8】：

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

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

此外，您可以通过将&#10;（换行符）添加到 title='' 属性来使悬停显示和点击显示多行，然后将其转换为 <br /> 以用于 html 点击显示：

$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');

【讨论】：

【解决方案9】：

派对迟到了，但对于未来的访客，这里是 @Flavaflo's answer 的调整，以淡入淡出“工具提示”

JQuery:

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

CSS：

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

.more_info .title {
    position: absolute;
    top: 20px;
    background: green;
    padding: 4px;
    left: 0;
    color: white;
    white-space: nowrap;
    border-radius:3px;
    animation: fadeIn linear 0.15s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

在这里提琴：http://jsfiddle.net/L3paxb5g/

【讨论】：

【解决方案10】：

我知道这是一个老问题，但我找到了一个也适用于移动设备的 CSS 解决方案，它根本不使用标题，而且很容易实现，解释如下：

https://www.w3schools.com/css/css_tooltip.asp 说明：

在移动设备上，使用触摸屏时，第一个输入充当 css 悬停，因此当您按下它时，它就像一个切换工具提示。

代码示例：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted #666;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 15em;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -8em;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 0.5em;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

【讨论】：

是什么让您确定这适用于移动网络？
即使您的链接可能对问题有用，但对其他人查看答案中的代码很有帮助。如果您可以在答案中添加相关代码，那就太棒了。
@HassanBaig 我在手机上用不同的浏览器试过了
@HasanSefaOzalp 我已经调整了答案，谢谢您的建议

【解决方案11】：

我正在寻找一种简单的纯 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/

【讨论】：

您链接到的那个 css 文件非常复杂...