是否可以在title属性内添加html？

Question

有没有一种方法可以将实际的html代码放在表行元素的title属性内？ 我的目标是不仅弹出文本，还弹出一些信息图形，因此，如果鼠标悬停事件不是模式的，那将是很好的。 我走错了方向吗？

该表已经在使用jquery数据表，但是我不认为它可以执行此类事件。

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

Answer 1

不。 您需要使用JavaScript创建自己的标题替换。

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/

Answer 3

没有。

HTML不能放在属性中。

如果目标是弹出一个包含丰富内容的弹出窗口，则您需要通过JavaScript进行处理。 此外，从可访问性的角度来看，您可能始终不想将这么多的内容放入title属性，因此采用JS路线将为您解决一些问题。 Google的“ JS工具提示”提供了数十种选择。

Answer 4

您可以使用jquery ui工具提示插件显示自定义标题

Answer 5

而不是关注title属性，而是在目标<td></td> （表数据元素）内包含带有标签的弹出消息。 然后在该td中放置一个类以使用CSS控制div，先将其隐藏，然后在鼠标悬停在特定表数据元素上时使其内容可见。 像这样：

<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可能类似于：

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 */

}

Answer 6

没有直接方法可以呈现在工具提示中编写的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" );
                    }
              }
        });
});

Answer 7

使用Bootstrap工具提示可以执行以下操作

<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>

对我来说，它会自动发生，但您可能需要使用javascript触发它。

$(function () { $('[data-toggle="tooltip"]').tooltip() })

docs

Answer 8

我认为一个不错的选择是将内容放在data属性内，如下所示：

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

然后，编写一个简单的jQuery插件，将其悬停在元素内即可显示该内容。