是否可以格式化HTML工具提示（标题属性）？ [重复]

Question

这个问题在这里已有答案：

• 如何更改锚标记内title属性的样式？ 10个答案

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

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

Answer 1

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

例如：

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

Answer 2

没有。但是还有其他选择，如Overlib和jQuery ，可以让你获得这种自由。

• jTip： http ： //www.codylindley.com/blogstuff/js/jtip/
• jQuery工具提示： https ： //jqueryui.com/tooltip/

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

Answer 3

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

http://davidwalsh.name/css-tooltips

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

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

http://csstooltip.com

Answer 4

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

通常我会使用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的那些。

优点：

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

缺点：

• 工具提示的定位更加困难

Answer 5

不，这是不可能的，浏览器有自己的方法来实现工具提示。 您所能做的就是使用Javascript创建一个行为类似HTML工具提示的div（通常只是'在悬停时显示'），然后按照您想要的方式设置样式。

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

请参阅Jonathan的帖子获取一些好资源。

Answer 6

不确定它是否适用于所有浏览器或第三方工具，但我已成功在新行的工具提示中指定“\\ 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];
}

Answer 7

我写了这个小的javascript函数，将所有原生标题工具提示转换为程式化节点： http ： //jsfiddle.net/BurakUeda/g8r8L4vt/1/

 mo_title = null; mo_element = null; document.onmousemove = function (e) { var event = e || window.event; var current_title; var moposx = e.pageX; // current var moposy = e.pageY; // mouse positions var tooltips = document.getElementById("tooltips"); // element for displaying stylized tooltips (div, span etc.) var current_element = event.target || event.srcElement; // the element we're currently hovering if (current_element == mo_element) return; // we're still hovering the same element, so ignore if(current_element.title){ current_title = current_element.title; } else { current_title = "-_-_-"; // if current element has no title, current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title } if(mo_element == null){ // this is our first element mo_element = current_element; mo_title = current_title; } if(mo_title) mo_element.title = mo_title; // restore the title of the previous element mo_element = current_element; // set current values mo_title = current_title; // as default if(mo_element.title){ var mo_current_title = mo_element.title; // save the element title mo_element.title = ""; // set it to none so it won't show over our stylized tooltip if(mo_current_title == "-_-_-"){ // if the title is fake, don't display it tooltips.style.display = "none"; tooltips.style.left = "0px"; tooltips.style.left = "0px"; tooltips.innerHTML = ""; } else { tooltips.style.display = "inline-block"; tooltips.style.left = (moposx + 10) + "px"; tooltips.style.top = (moposy + 10) + "px"; tooltips.innerHTML = mo_current_title; } } }; 

 #tooltips { display: none; position: absolute; left 0; top: 0; color: white; background-color: darkorange; box-shadow: black 2px 2px 2px; padding: 5px; border-radius:5px; } #buttoncontainer{ border: 1px black solid; padding: 10px; margin: 5px; } 

 <div id="tooltips"></div> <div> <div title="DIV #1">Division 1</div> <div id="buttoncontainer" title="Button container"> <button title="Button with title"> Button #1 </button> <button> Button w/o title </button> <button title=" <table border='1' cellpadding='4' cellspacing='0'> <tr> <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #1</td> <td style='text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px'>Description 1</td> </tr> <tr> <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #2</td> <td style='text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px'>Description 1</td> </tr> <tr> <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #3</td> <td style='text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px'>Description 1</td> </tr> </table> "> Button title containing HTML </button> </div> </div 

优点：

• 你不必转换任何东西。 只需使用原生标题属性编写通常的HTML。
• 您可以在标题工具提示中使用HTML标记和内联样式。 （请参阅标题中带有整个HTML表格的示例，并带有自己的样式）

缺点：

• 这是javascript
• 没有在每个浏览器上测试，但适用于最新版本的Chrome，FF，IE和Opera

它可能写得更优雅，并且可能有一些不必要的行。

此外，stackoverflow代码片段无法正确解析HTML代码，因此请在我提供的jsfiddle链接上进行检查。

Answer 8

Mootools在他们的“更多建设者”中也提供了一个很好的“提示”课程。

Answer 9

我知道这是一个老帖子，但我想补充一下我的答案，以备将来参考。 我使用jQuery和css来设计我的工具提示：easyiest-tooltip-and-image-preview-using-jquery（对于演示： http ： //cssglobe.com/lab/tooltip/02/ ）在我的静态网站上，这只是工作大。 但是，在迁移到Wordpress期间，它已停止。 我的解决方案是将像<br> and <span>这样的标签更改为： <br> and <span> <br> and <span> 这适合我。

Answer 10

在bootstrap工具提示中只使用data-html =“true”