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属性的元素上的/ tab时，将追加带有标题文本的子元素。再次点击它就会被删除。

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

/*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>

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

Answer 3

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

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

qTip Modal tooltip

Answer 4

更精致的版本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/

Answer 5

正如@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添加到body（通过js）。然后，您可以在不影响桌面用户的情况下执行body.touched [title]:hover ...

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

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

你可以用javascript实现几乎与你说的相似。

Answer 7

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

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

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

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

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

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

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

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

Answer 8

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

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

此外，您可以将
（换行符）添加到标题=＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;属性，然后将其转换为<br />以进行html单击显示：

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

Answer 9

我知道这是一个古老的问题，但是我发现了一个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>

Answer 10

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

Answer 11

聚会太晚了，但对于未来的访客，这里有一个 @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/

移动浏览器的工具提示

11 个答案: