可以在title属性中添加HTML吗？

Question

有没有办法将实际的HTML代码放入表格行元素的标题属性中？我的目标是弹出文本以及一些信息图表，因此一个不是模态的鼠标悬停事件会很棒。我走错方向了吗？

这个表格已经在使用jQuery datatables，但我不认为它可以执行那种事件。

<tr title='This activity will be open to registration on April 31st' >
.....
</tr>

- Maelish

---

你尝试过使用Bootstrap的工具提示吗？ - dcodesmith

那不是标题标签，而是属性。你不能在属性中放置HTML。 - DA.

是的，如果适当地转义，可以在标题属性中放置HTML字符串。然而，HTML不会作为工具提示呈现，而是会得到HTML字符串。您将需要使用JavaScript或CSS解决方案拦截工具提示（或替换它），以显示和隐藏包含所需HTML的元素。 - Kevin B

你试过了吗？发生了什么事情？ - epascarello

Answer 1

不行，你需要使用JavaScript创建自己的标题替代。

- j08691

Answer 2

原生工具提示不使用 HTML，jQuery UI 工具提示在这里非常有用。

演示：http://jqueryui.com/tooltip/ 编辑：您需要使用content选项来使用标记而不是title属性。

$(".text")
    .tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });

这里有一个演示程序，展示了如何实现此功能：http://jsfiddle.net/acbabis/64Q2m/

- aebabis

---

似乎无法与jQueryUI 1.8.23一起使用-也许较新的版本支持HTML？（实际上我有很多问题-例如无法设置内容） - ryan2johnson9

@ryan2johnson9 看起来.tooltip是在jQueryUI的1.9版本中添加的，所以你的猜测是正确的。http://api.jqueryui.com/tooltip/ - aebabis

我确实可以使用 .tooltip 方法并且可以改变工具提示的样式，但是我无法设置内容，并且它也不能正确显示 HTML。也许这是 1.9 版本的一个改进，不太确定。 - ryan2johnson9

不确定，@ryan2johnson9。你可以尝试的一件事是调用.tooltip然后在子元素上调用.html。 - aebabis

我真傻 - 我也安装了Bootstrap，所以我认为我的.tooltip()调用正在使用Bootstrap。并且使用.tooltip({html:true})可以解决问题。 - ryan2johnson9

Answer 3

不可以在属性中放置HTML。

如果目标是要有一个包含丰富内容的弹出框，那么您需要通过javascript来处理。另外，从可访问性角度来看，您可能不希望将那么多内容放入标题属性中，所以采用JS路线将为您解决一些问题。谷歌搜索“JS Tooltip”可以得到数十种选择。

- DA.

Answer 4

没有直接的方法来渲染在工具提示中编写的HTML代码。但是，如果您正在使用jQueryUI（或者如果您可以），则下面的代码将在工具提示中显示HTML效果（呈现），而不是HTML代码。

要求：jQuery、jQueryUI.js、jQueryUI.css

HTML代码：

<tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>

JavaScript:

$(function() {
        $( document ).tooltip({
              items: '[title], [data-title]',
              track:true,
              content: function(){
                  var element = $( this );
                    if ( element.is( "[title]" ) ) {
                      return element.attr( "title" );
                    }
                    if ( element.is( "[data-title]" ) ) {
                      return element.attr( "data-title" );
                    }
              }
        });
});

- jainashish

Answer 5

你可以使用 jquery ui tooltip 插件来显示自定义标题。

- Premshankar Tiwari

Answer 6

不要只关注标题属性，而是在目标<td></td>（表格数据元素）中使用<div>标签来包含弹出消息。然后在该中放置一个类来控制CSS中的

，首先将其隐藏，然后在鼠标悬停在特定的表格数据元素上时使其内容可见。类似于以下内容：

<tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>

您的CSS可能是这样的：

您的CSS可能是这样的：

td.info-tooltip div {

display:none;

}

td.info-tooltip:hover {

position:relative;
cursor:pointer; 

}

td.info-tooltip:hover div {

position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block; 
width: 500px; /* give this your own width */

}

- jpaulino

---

有趣的想法，但我希望它可以在整个行上弹出，而不是单个td元素。 - Maelish

Answer 7

使用Bootstrap工具提示可以做到以下几点： <span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>这个有支持HTML的工具提示</span> 对我而言，它会自动发生，但你可能需要使用JavaScript来触发它。 $(function () { $('[data-toggle="tooltip"]').tooltip() }) 文档请见：docs。

- ryan2johnson9

---

这只在Bootstrap 4中吗？ - Maelish

我正在使用Bootstrap版本v3.3.7。 - ryan2johnson9

Answer 8

我认为一个好的选择是将该内容放在数据属性中，类似于这样：

<div data-tooltip="Some information I want to show">
    Actual content
</div>

然后，编写一个简单的jQuery插件，在鼠标悬停时显示该内容。

- MadKian88