74

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 来监听点击,然后显示一个类似于工具提示的对话框?有没有原生机制?

4

11 回答 11

35

您可以使用 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/

于 2012-09-21T21:39:42.093 回答
24

这是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>

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

于 2020-03-12T18:49:15.740 回答
8

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/

于 2016-05-20T11:28:52.157 回答
7

鉴于现在(2015 年)有很多人使用移动浏览器,但仍未在移动浏览器中找到某种形式的曝光,也许是时候放弃对有意义信息title的依赖了。title

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

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

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

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

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

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

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

于 2015-09-15T01:38:37.983 回答
6

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

具体来说,你可以试试qTip jQuery 插件,它有一个模式模式$.click()

qTip 模态工具提示

于 2012-09-21T22:24:32.723 回答
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,borderbox-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>

于 2016-11-06T21:38:02.067 回答
2

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

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

于 2012-09-21T20:09:50.993 回答
1

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

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

$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');
于 2018-03-18T11:58:05.750 回答
1

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

于 2021-02-04T00:47:40.753 回答
1

派对迟到了,但对于未来的访客来说,这是对@Flavaflo 的答案的调整,可以淡入淡出“工具提示”

查询:

    $(".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/

于 2021-07-02T09:28:46.037 回答
-1

我知道这是一个老问题,但我找到了一个也适用于移动设备的 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> 
于 2020-05-25T22:35:56.430 回答