有没有办法将实际的 html 代码放在表格行元素的标题属性中?我的目标是不仅弹出文本,还弹出一些信息图形,因此不是模态的鼠标悬停事件会很棒。我是不是走错方向了?
这个表已经在使用 jquery 数据表,但我不相信它可以做那种事件。
<tr title='This activity will be open to registration on April 31st' >
.....
</tr>
有没有办法将实际的 html 代码放在表格行元素的标题属性中?我的目标是不仅弹出文本,还弹出一些信息图形,因此不是模态的鼠标悬停事件会很棒。我是不是走错方向了?
这个表已经在使用 jquery 数据表,但我不相信它可以做那种事件。
<tr title='This activity will be open to registration on April 31st' >
.....
</tr>
不。您需要使用 JavaScript 创建自己的标题替代品。
不。
HTML 不能放在属性中。
如果目标是具有丰富内容的弹出窗口,那么您需要通过 javascript 处理此问题。此外,从可访问性的角度来看,您可能无论如何都不想将大量内容放入 title 属性中,因此采用 JS 路线将为您解决一些问题。谷歌“JS 工具提示”有几十个选项。
本机工具提示不使用 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/
您可以使用jquery ui 工具提示插件来显示自定义标题
没有直接的方法来呈现在工具提示中编写的 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" );
}
}
});
});