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

IT技术 javascript jquery html
2021-03-04 14:47:49

有没有办法将实际的 html 代码放在表格行元素的标题属性中?我的目标是不仅弹出文本,还弹出一些信息图形,因此不是模态的鼠标悬停事件会很棒。我是不是走错方向了?

这个表已经在使用 jquery 数据表,但我不相信它可以做那种事件。

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

不。您需要使用 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/

愚蠢的我 - 我也安装了引导程序,所以我认为我的 .tooltip() 调用正在使用引导程序。和使用.tooltip({html:true})作品
2021-04-27 14:47:49
好吧,我确实有 .tooltip 方法可供我使用,它确实改变了工具提示的样式,我只是无法设置内容,也无法正确显示 html。也许那是 1.9 的改进,不确定。
2021-04-29 14:47:49
也不确定,@ryan2johnson9。您可以尝试的一件事是调用.tooltip然后调用.html子元素
2021-05-04 14:47:49
@ryan2johnson9 似乎.tooltip是在 jQueryUI 1.9 版中添加的,所以您的猜测是正确的。api.jqueryui.com/tooltip
2021-05-08 14:47:49
似乎不适用于 jqueryui 1.8.23 - 也许更高版本支持 html?(实际上我遇到了很多问题——比如无法设置内容)
2021-05-14 14:47:49

您可以使用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" );
                    }
              }
        });
});