是否可以格式化HTML工具提示（标题属性）？
是否可以格式化HTML工具提示？
例如我有一个属性title =“foo！”的DIV。 当我的浏览器的文本大小放大或缩小时，工具提示的文本大小保持不变。 有没有办法使浏览器设置的工具提示字体缩放？
不，但还有其他的select，如Overlib和jQuery ，让你自由。
- jTip： http : //www.codylindley.com/blogstuff/js/jtip/
- jQuery的工具提示： https ： //jqueryui.com/tooltip/
就个人而言，我会build议jQuery作为采取的路线。 这通常是非常不引人注意的，并且不需要在站点标记中进行额外的设置（除了在<head>中添加jquery脚本标记之外）。
尝试使用实体代码，例如
 对于CR， 
 对于LF， 	 为TAB。
例如：
<div title="1)	A
2)	B">Hover Me</div>
看来你可以使用CSS和一个技巧（没有JavaScript）来做到这一点：
http://davidwalsh.name/css-tooltips
http://www.menucool.com/tooltip/css-tooltip
不，这是不可能的，浏览器有自己的方式来实现工具提示。 所有你能做的就是创build一些div，它的行为像一个HTML工具提示（大部分是'显示在hover'上），然后用你想要的样式。
有了这个，你不必担心浏览器的放大或缩小，因为工具提示div内的文本是一个实际的HTML，它会相应地缩放。
看到乔纳森的职位 ，一些好的资源。
Mootools在“更多构build器”中也有一个很好的“技巧”类。
这是不可能的。 但是你可以使用一些JavaScript库来创build这样的工具提示，例如http://www.taggify.net/
不知道它是否适用于所有的浏览器或第三方工具，但我已经成功了，只需在工具提示中指定“\ n”换行符，在至lessie11，Firefox和Chrome中使用dhtmlx
for (var key in oPendingData) { var obj = oPendingData[key]; this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol]; }
他们总是说比迟到好得多。
通常我会使用jQuery来解决这种情况。 但是，在为需要无javascript解决scheme的客户端工作时，我想出了以下内容：
<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; }
这使您可以根据自己的需要select样式，并且可以在所有浏览器中使用。 即使是JavaScript被禁用的。
优点：
- 你对造型有很大的影响
- 它在（几乎）所有的浏览器中工作
缺点：
- 定位工具提示比较困难
我写了这个小的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
我知道这是一个旧post，但我想添加我的答案，供将来参考。 我使用jQuery和CSS风格我的工具提示：最简单的工具提示和图像预览使用jQuery的（对于演示： http : //cssglobe.com/lab/tooltip/02/ ）在我的静态网站上，这只是工作大。 但是，在迁移到Wordpress期间停止。 我的解决scheme是将像<br> and <span>这样的标签更改为： <br> and <span> <br> and <span> 这对我有用。
