Html 移动浏览器的工具提示

Tooltips for mobile browsers

提问by at.

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

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

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

Then in CSS:

然后在 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. titleattributes 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?

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

采纳答案by flavaflo

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

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

Javascript (done with jQuery):

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:

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/

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

回答by msanford

Depending on how much information you want to give the user, a modal dialogue boxmight be an elegant solution.

根据您想给用户多少信息，模态对话框可能是一个优雅的解决方案。

Specifically, you could try the qTipjQuery plugin, which has a modalmode fired on $.click():

具体来说，你可以尝试qTipjQuery 插件，它有一个模式模式$.click()：

回答by bgx

Slightly more elaborated version of flavaflo's answer:

flavaflo 答案的更详细版本：

• Uses pre-defined div as pop-up that can hold HTML, rather than reading from a title attribute
• Opens/closes on rollover if mouse is used
• Opens on click (touch screen) and closes on click on the open pop-up or anywhere else on the document.

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

HTML:

HTML：

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

CSS:

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:

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

});

Demo here https://jsfiddle.net/bgxC/yvs1awzk/

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

回答by Patanjali

Given that a lot of people nowadays (2015) use mobile browsers, and titlestill hasn't found a form of exposure in mobile browsers, maybe it's time to deprecate reliance upon titlefor meaningful information.

鉴于如今（2015 年）很多人都在使用移动浏览器，title但仍然没有在移动浏览器中找到一种暴露形式，也许是时候弃用对title有意义信息的依赖了。

It should never be used for critical information, but it is now becoming dubious for useful information, because if that information is useful and cannot be shown to half the users, then another way of showing it to almost all users needs to be found.

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

For static pages, perhaps some visible text near to the relevant control, even as fine print. For server-generated pages, browser sniffing could provide that only for mobile browsers. On the client side, javascript could be used to trap the focus event, via bubbling, to show the extra text next to the currently focussed element. That would minimise the screen space taken up, but would not necessarily be of much use, since, in a lot of instances, bringing focus to a control can only be done in a way that immediately activates its action, bypassing the ability to find out about it before using it!

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

Over all though, it appears that the difficulties of showing the titleattribute on mobile devices, may lead to its demise, mostly due to needing an alternative that is more universal. That is a pity, because mobiles could use a way to show such extra info on-demand, without taking up the limited screen space.

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

It seems strange that the w3c and mobile browser makers did not do anything about this issue a long time ago. At least they could have displayed the title text on top of the menu that appears when a long press on a control is made.

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

Personally, I wish it was placed at the top of a right-click/long-touch menu, as it won't timeout, and would be available on all browsers.

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

The other alternative is to construct footnotes, so an [n] type superscript is put next to the element/text needing more info, linking to explanatory text in a list at the bottom of the page. Each of those can have a similar [n] type link back to the original text/element. That way, it keeps the display uncluttered, but provides easy bidirectional swapping in a simple way. Sometimes, old print media ways, with a little hyperlink help, are best.

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

The titleattribute has been hiHymaned by some browsers to provide help text for the pattern attribute, in that its text pops up if the pattern doesn't match the text in the input element. Typically, it is to provide examples of the right format.

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

回答by Jamie Pate

As @cimmanon mentioned: span[title]:hover:after { content: attr(title) }gives you a rudimentary tooltip on touch screen devices. Unfortunately this has problems where the default ui behavior on touch screen devices is to select the text when any non-link/uicontrol is pressed.

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

To solve the selection problem you can add span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

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

A full solution may use some other techniques:

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

• Add position: absolutebackground, border, box-shadowetc to make it look like a tooltip.
• Add the class touchedto body (via js) when the user uses any touch event. Then you can do body.touched [title]:hover ...without affecting desktop users

• 添加position: absolutebackground，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>

回答by H K

Here is a CSSonly solution. (Similar to @Jamie Pate 's answer, but without the JavaScript.)

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

We can use the pseudo class ::hover, but I'm not sure all mobile browsers apply these styles when the element is tapped. I'm using pseudo class ::focusbecause I'm guessing it's safer. However, when using pseudo class ::focuswe need to add tabindex="0"to elements that don't have a focus state intrinsically.

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

I'm using 2 @mediaqueries to ensure all mobile devices are targeted. The (pointer: coarse)query will target any device that the primary input method is something "coarse" like a finger. And the (hover: none)query will target and device that the primary pointing system can't hover.

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

This snippet is all that's needed:

这个片段是所有需要的：

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

}

<a title="this is the Title text" tabindex="0">Tag with Title</a>

Obviously, you'll need to open this on a mobile device to test it. Here is a Pen with the same code.

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

回答by H K

The title attribute is not supported in any mobile browsers **in a way that it would show the tooltip the same as to desktop mouse users** *(the attribute itself is ofcourse supported in the markup)*.
It's only basically for desktop users with a mouse, keyboard only users can't use it either, or screenreaders.

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

You can achieve almost similar with javascript as you said.

正如您所说，您可以使用 javascript 实现几乎相似的效果。

回答by PrometeoPrime

I know this is an old question, but i have found a CSS solution that works on mobile too, it doesn't use title at all and it's easy to implement, explained here:

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

https://www.w3schools.com/css/css_tooltip.aspExplanation:

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

On mobile, with the touchscreen,the first input acts as css hover, so it works like a toggle tooltip when you press on it.

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

Code example:

代码示例：

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

回答by Eric Twose

Thanks to @flavaflo for their answer. This works in most cases but if there is more than one title to lookup in the same paragraph, and one opens over the link to another, the unopened link shows through the first. This can be solved by dynamically changing the z-index of the title that has "popped up":

感谢@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);
  }
});?

Also, you can make both the hover over display and the click display multiline by adding 
(linefeed) to the title='' attribute, and then convert that to <br />for the html click display:

此外，您可以通过将
(linefeed)添加到 title='' 属性来使悬停显示和点击显示多行，然后将其转换<br />为 html 点击显示：

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