是否有可能格式HTML提示(标题属性的)?[重复]

https://stackoverflow.com/questions/484137

html
tooltip

20-08-2019
|

题

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

如何改变风格的标题属性内锚标签？ 10答案

是否有可能格式HTML提示?

E.g。我有一个DIV attribute title="foo!".当我有文本的尺寸的我浏览器的放大或缩小，该文本大小的提示保持不变。是否有办法使该工具提字体比例与浏览器？

解决方案

没有。但还有其他的选择喜欢的 Overlib, ， jQuery 这能让你这种自由。

jTip: http://www.codylindley.com/blogstuff/js/jtip/
jQuery提示: https://jqueryui.com/tooltip/

就个人而言，我建议jQuery作为路线。这是通常非常不引人注目，不需要额外安装在标记的站点(除加s脚本标记你的 <head>).

其他提示

尝试使用实体的代码如  为CR， 
 为LF， 	 为选项。

例如：

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

它似乎可以使用css和招(没有javascript)为这样做:

http://davidwalsh.name/css-tooltips

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

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

http://csstooltip.com

迟到总比不到好的，他们总是说。

通常我会用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是残疾人。

赞成:

你有很大的影响力上的造型
它的工作原理在(近)所有的浏览器

缺点：

它的困难位置的提示

不，这是不可能的，浏览器上有他们自己的方式来实施提示。你所能做的就是创造一些div的行为就像一个HTML提示(主要是它只是显示在悬停')与Javascript，然后式这你想要的方式。

有了这个，你就不必担心有关浏览器的放大或缩小，由于文本的内部工具提div是一个实际HTML，它将规模。

看到乔纳森后对于一些良好的资源。

脱还有一个好的提示'类提供在自己的更多的建设者'.

不知道，如果它适用于所有浏览器或第3党的工具，但我们已成功就指定" "工具提供行，适用dhtmlx在至少internet explorer11、firefox和铬

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}

我写了这个小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 tags和内联型在你的标题的提示。(参见例如，与整个HTML表在一个标题，有它自己的造型)

缺点：

这是javascript
不过测试，对每一个浏览器中的存在，但工作的现有最新版本的铬，FF，即和歌剧院

它大概可以写更多的优雅和可能有一些线条就是不必要的。

此外，计算器代码的东西，无法解析HTML码是否正确，以便检查它在jsfiddle链接我提供。

我知道这是一个古老的职位，但我想补充我的答案对今后参考。我使用能力和css的风格我的提示:最简单-提示和图像的预览的使用。。 (一演示： http://cssglobe.com/lab/tooltip/02/) 在我的静态网站，这只是工作很大。然而，在迁移到Wordpress它停止。我的解决办法是更改标记像 <br> and <span> 到这个： <br> and <span> 这对我的作品。

在引导提示，只是使用数据html="真实的"

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow