是否可以格式化HTML工具提示(标题属性)?

sun*_*wer 77 html tooltip

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

例如,我有一个属性title ="foo!"的DIV.当我的浏览器文本大小放大或缩小时,工具提示的文本大小保持不变.有没有办法使用浏览器设置进行工具提示字体缩放?

小智 64

尝试使用实体代码,例如
CR,
LF和	TAB.

例如:

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>
Run Code Online (Sandbox Code Playgroud)

  • 这个答案没有回答如何使用js调整工具提示的字体大小的问题. (4认同)
  • 很好的解决方法.谢谢.有人在各种浏览器上测试CR + LF的组合吗?我使用了一对组合(`&#009; A&#013;&#009; A&#013;`)来获得两段的外观.我想知道这是否适用于浏览器和跨平台. (2认同)

Sam*_*son 44

没有.但是还有其他选择,如OverlibjQuery,可以让你获得这种自由.

就个人而言,我建议jQuery作为采取的路线.它通常非常不引人注目,并且不需要在站点的标记中进行额外设置(除了在<head>中添加jquery脚本标记).


San*_*ood 7

他们总是说,迟到总比不到好。

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

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

通过使用以下 css,您将获得与标题相同的情况:

.hover-container {
    position: relative;
}

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

.hover-container:hover .hover-content {
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

这也使您可以根据自己的需要选择样式,并且它适用于所有浏览器。即使是禁用 javascript 的那些。

优点:

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

缺点:

  • 更难定位工具提示