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

Question

提问by sunflowerpower

Is it possible to format an HTML tooltip?

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

E.g. I have a DIV with attribute title="foo!". When I have text-size of my browser zoomed in or out in, the text size of the tooltip remains unchanged. Is there a way to make the tooltip font scale with the browser setting?

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

Answer 1

采纳答案by Sampson

No. But there are other options out there like Overlib, and jQuerythat allow you this freedom.

不。但是还有其他选项，例如Overlib和jQuery，可以让您获得这种自由。

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

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

Personally, I would suggest jQuery as the route to take. It's typically very unobtrusive, and requires no additional setup in the markup of your site (with the exception of adding the jquery script tag in your <head>).

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

Answer 2

回答by Louis

Try using entity codes such as for CR, 
for LF, and 	for TAB.

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

For example:

例如：

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

Answer 3

回答by matteo galiazzo

it seems you can use css and a trick (no javascript) for doing it:

看来你可以使用 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

回答by Sander Koedood

Better late than never, they always say.

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

Normally I'd use jQuery to solve such a situation. However, when working on a site for a client which required a javascript-less solution, I came up with the following:

通常我会使用 jQuery 来解决这种情况。但是，在为需要无 javascript 解决方案的客户的网站上工作时，我想出了以下内容：

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>

By using the following css, you get the same situation as with a title:

通过使用以下 css，您将获得与标题相同的情况：

.hover-container {
    position: relative;
}

.hover-content {
    position: absolute;
    bottom: -10px;
    right: 10px;
    display: none;
}

.hover-container:hover .hover-content {
    display: block;
}

This gives you the option to style it according to your needs as well, and it works in all browsers. Even the ones where javascript is disabled.

这也使您可以根据自己的需要选择样式，并且它适用于所有浏览器。即使是禁用 javascript 的那些。

Pros:

优点：

You have a lot of influence on the styling
It works in (nearly) all browsers

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

Cons:

缺点：

It's harder to position the tooltip

更难定位工具提示

Answer 5

回答by andyk

No, it's not possible, browsers have their own ways to implement tooltip. All you can do is to create some div that behaves like an HTML tooltip (mostly it's just 'show on hover') with Javascript, and then style it the way you want.

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

With this, you wouldn't have to worry about browser's zooming in or out, since the text inside the tooltip div is an actual HTML, it would scale accordingly.

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

See Jonathan's postfor some good resource.

有关一些好的资源，请参阅 Jonathan 的帖子。

Answer 6

回答by mirosz

In bootstrap tooltip just use data-html="true"

在引导工具提示中只需使用 data-html="true"

Answer 7

回答by BurakUeda

I wrote this small javascript function that converts all of your native title tooltips into stylized nodes: http://jsfiddle.net/BurakUeda/g8r8L4vt/1/

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

Pros:

优点：

You don't have to convert anything. Just write your usual HTML with native title attributes.
You can use HTML tags and inline styling in your title tooltips. (See the example with whole HTML table in a title with it's own styling)

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

Cons:

缺点：

It's javascript
Not tested on every browser in existance, but works fine with latest versions of Chrome, FF, IE and Opera

这是javascript
未在现有的所有浏览器上进行测试，但适用于最新版本的 Chrome、FF、IE 和 Opera

It probably can be written more elegantly and may have a few lines that is unnecessary.

它可能可以写得更优雅，并且可能有几行是不必要的。

Also, stackoverflow code snippet thingy cannot parse the HTML code correctly, so check it on the jsfiddle link I provided.

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

Answer 8

回答by aggaton

Not sure if it works with all browsers or 3rd party tools, but I have had success just specifying "\n" in tooltips for newline, works with dhtmlx in at least ie11, firefox and chrome

不确定它是否适用于所有浏览器或 3rd 方工具，但我在换行符的工具提示中指定“\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 9

回答by TJ L

Mootoolsalso has a nice 'Tips' class available in their 'more builder'.

Mootools在他们的“more builder”中也有一个不错的“Tips”类。

Answer 10

回答by Jurgen

I know this is an old post but I would like to add my answer for future reference. I use jQuery and css to style my tooltips: easiest-tooltip-and-image-preview-using-jquery (for a demo: http://cssglobe.com/lab/tooltip/02/) On my static websites this just worked great. However, during migrating to Wordpress it stopped. My solution was to change tags like  and into this:  and This works for me.

我知道这是一篇旧帖子，但我想添加我的答案以供将来参考。我使用 jQuery 和 css 来设置我的工具提示的样式：最简单的工具提示和图像预览使用 jquery（用于演示：http: //cssglobe.com/lab/tooltip/02/）在我的静态网站上，这刚刚奏效伟大的。但是，在迁移到 Wordpress 期间它停止了。我的解决方案是将标签更改 and 为这样： and 这对我有用。

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

提问by sunflowerpower

采纳答案by Sampson

回答by Louis

回答by matteo galiazzo

回答by Sander Koedood

Pros:

优点：

Cons:

缺点：

回答by andyk

回答by mirosz

回答by BurakUeda

回答by aggaton

回答by TJ L

回答by Jurgen

相关推荐

最近更新

标签

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

提问by sunflowerpower

采纳答案by Sampson

回答by Louis

回答by matteo galiazzo

回答by Sander Koedood

Pros:

优点：

Cons:

缺点：

回答by andyk

回答by mirosz

回答by BurakUeda

回答by aggaton

回答by TJ L

回答by Jurgen

相关推荐

Html Div 水平居中垂直居中

在 Windows 窗体上显示 HTML 内容的最佳方式是什么？

透明表单背景 HTML

我可以将 HTML 文档强制为一页吗？

相关推荐

最近更新

标签