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/

编辑：您需要使用内容选项来使用标记而不是标题属性。

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

这是一个小提琴演示：http://jsfiddle.net/acbabis/64Q2m/

Answer 3

没有

HTML不能放在属性中。

如果目标是弹出内容丰富的内容，那么您需要通过javascript处理此问题。此外，从可访问性的角度来看，您可能不希望将该数量的内容放入title属性中，因此使用JS路由将为您解决一些问题。谷歌“JS工具提示”提供了数十种选择。

Answer 4

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

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代码：

allowed_state <- function(old=NULL,new=NULL){
legalst<-data.table(from=c(1,1,9,9,7,8,7,10,10,11,11,10,11,8,7),to=c(11,7,10,7,8,7,9,9,7,1,7,1,7,9,10)) # all legal state transitions for a user
if(new %in% legalst[from==old,to]) "Legal" else "Illegal state change"

JavaScript的：

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

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

我认为一个好的选择是将内容放在数据属性中，如下所示：

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

然后，编写一个简单的jQuery插件，在插入时显示元素内的内容。

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

8 个答案: