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

有没有办法将真正的HTML代码放在表格行元素的title属性中？我的目标是不仅弹出文本，而且还弹出一些信息图形，所以不是模式的鼠标悬停事件会很棒。我会走错方向吗？是否可以在标题属性中添加html？

此表已使用jquery数据表，但我不相信它可以做这种事件。

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

来源

2014-01-15 Maelish

您是否尝试过使用引导程序提示？ – dcodesmith

这不是标题标签。这是一个属性。您不能将HTML放入属性中。 –

是的，可以将html字符串放在标题属性中（如果转义正确）。但是html不会呈现为工具提示，而是您将获得html字符串。你必须用javascript或css解决方案拦截工具提示（或替换它），该解决方案显示并隐藏包含所需html的元素。 –

没有。你需要用JavaScript创建你自己的标题替代品。

来源

2014-01-15 18:16:23 j08691

本机工具提示不使用HTML。 jQuery UI工具提示在这里非常有用。

演示：http://jqueryui.com/tooltip/

编辑：你会需要使用内容选项可以使用的标记，而不是title属性。

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

这里有一个小提琴证明这一点：http://jsfiddle.net/acbabis/64Q2m/

来源

2014-01-15 18:20:38 acbabis

似乎不能用jqueryui 1.8.23 - 也许更高版本支持HTML？（实际上我有很多问题 - 比如不能设置内容） – ryan2johnson9

@ ryan2johnson9在jQueryUI 1.9版本中增加了“.tooltip”，所以你的猜测是正确的。 http://api.jqueryui.com/tooltip/ – acbabis

嗯，我确实有.tooltip方法可用于我，它确实改变了工具提示的风格，我只是无法设置内容，它也没有正确显示html。也许这是1.9的改进不能确定。 – ryan2johnson9

号

HTML不能被放置在一个属性。

如果目标是要有一个丰富的内容弹出，那么你需要通过JavaScript来处理。另外，从可访问性的角度来看，您可能不希望将这些内容放入title属性中，因此使用JS路径将为您解决一些问题。 Google'JS Tooltip'提供数十个选项。

来源

2014-01-15 18:24:48

我认为一个好的选择是把该内容的数据属性中，这样的事情：

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

，然后写一个简单的jQuery插件，显示在鼠标悬停在该内容的元素里面。

来源

2014-01-15 19:54:14 MadKian88

不用专注于标题属性，而是在目标文件<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 */ 

}

来源

2014-01-16 00:20:21 jpaulino

有趣的想法，但我想它弹出打开整个行，而不是一个单一的TD元素。 – Maelish

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

来源

2014-01-16 10:31:24

有渲染中编写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"); 
        } 
       } 
     }); 
});

来源

2017-12-08 11:40:52 jainashish

使用引导工具提示一个可以做以下

<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

来源

2018-02-09 07:36:31 ryan2johnson9

这只在Bootstrap 4中吗？ – Maelish

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

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

回答

相关问题