88

是否可以格式化 HTML 工具提示？

例如，我有一个属性为 title="foo!" 的 DIV。当我放大或缩小浏览器的文本大小时，工具提示的文本大小保持不变。有没有办法通过浏览器设置使工具提示字体缩放？

4

9 回答 9

91

尝试使用实体代码，例如
CR、
LF 和	TAB。

例如：

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>

于 2012-09-18T23:09:12.713 回答
47

不，但是还有其他选项，例如Overlib和jQuery，可以让您获得这种自由。

就个人而言，我建议使用 jQuery 作为路线。它通常非常不引人注目，并且不需要在您的站点标记中进行额外设置（除了在 <head> 中添加 jquery 脚本标记）。

于 2009-01-27T16:40:11.757 回答
18

看来您可以使用 css 和一个技巧（没有 javascript）来做到这一点：

http://davidwalsh.name/css-tooltips

http://www.menucool.com/tooltip/css-tooltip

http://sixrevisions.com/css/css-only-tooltips/

http://csstooltip.com

于 2010-09-22T10:29:31.613 回答
7

他们总是说，迟到总比没有好。

通常我会使用 jQuery 来解决这种情况。但是，在为需要无 javascript 解决方案的客户端工作时，我想出了以下内容：

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>

通过使用以下 css，您会得到与标题相同的情况：

.hover-container {
    position: relative;
}

.hover-content {
    position: absolute;
    bottom: -10px;
    right: 10px;
    display: none;
}

.hover-container:hover .hover-content {
    display: block;
}

这也使您可以选择根据需要对其进行样式设置，并且它适用于所有浏览器。即使是禁用 javascript 的那些。

优点：

  • 你对造型有很大影响
  • 它适用于（几乎）所有浏览器

缺点：

  • 定位工具提示更难
于 2014-10-27T15:07:16.773 回答
4

在引导工具提示中，只需使用 data-html="true"

于 2018-01-12T16:46:49.763 回答
3

不，这是不可能的，浏览器有自己的方式来实现工具提示。您所能做的就是使用 Javascript 创建一些行为类似于 HTML 工具提示的 div（主要是“悬停时显示”），然后按照您想要的方式对其进行样式设置。

有了这个，您不必担心浏览器的放大或缩小，因为工具提示 div 内的文本是实际的 HTML，它会相应地缩放。

有关一些好的资源，请参阅 Jonathan 的帖子。

于 2009-01-27T17:04:12.220 回答
2

不确定它是否适用于所有浏览器或第 3 方工具，但我已经成功地在工具提示中为换行符指定“\n”，至少在 ie11、firefox 和 chrome 中适用于 dhtmlx

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}
于 2014-06-29T01:46:59.937 回答
1

Mootools的“更多构建器”中还有一个不错的“提示”类。

于 2009-01-27T17:01:26.610 回答
0

我知道这是一篇旧帖子，但我想添加我的答案以供将来参考。我使用 jQuery 和 css 来设置我的工具提示样式：easy-tooltip-and-image-preview-using-jquery（用于演示：http ://cssglobe.com/lab/tooltip/02/ ）伟大的。但是，在迁移到 Wordpress 期间它停止了。我的解决方案是将标签更改<br> and <span>为：&lt;br&gt; and &lt;span&gt; 这对我有用。

于 2016-09-21T18:05:13.433 回答