Question

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

E.g。我有一个属性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作为路线。它通常非常不引人注目，并且不需要在您的站点标记中进行额外设置（除了在＆lt; head＆gt;中添加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的post获取一些好资源。

Answer 6

这是不可能的。但是你可以使用一些javascript库来创建这样的工具提示，例如http://www.taggify.net/

Answer 7

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

Answer 8

不确定它是否适用于所有浏览器或第三方工具，但我已成功指定＆＃34; \ n＆＃34;在newline的工具提示中，至少在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 9

我编写了这个小的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 10

我知道这是一篇旧帖子，但我想补充一下我的答案，以备日后参考。我使用jQuery和css来设计我的工具提示：最简单的工具提示和图像预览使用jquery （对于演示：http://cssglobe.com/lab/tooltip/02/）在我的静态网站上，这非常有效。但是，在迁移到Wordpress期间，它已停止。我的解决方案是将<br> and <span>之类的标记更改为：<br> and <span> 这对我有用。

Answer 11

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

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

11 个答案:

优点：

缺点：