是否可以格式化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脚本标记之外)。

尝试使用实体代码,例如&#013; 对于CR, &#010; 对于LF, &#009; 为TAB。

例如:

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

不,这是不可能的,浏览器有自己的方式来实现工具提示。 所有你能做的就是创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>这样的标签更改为: &lt;br&gt; and &lt;span&gt; &lt;br&gt; and &lt;span&gt; 这对我有用。