将 HTML 标记添加到 materialize.css 工具提示

Question

有没有办法在 materialize 的工具提示中添加 HTML 标记？我正在尝试将一些数据安排为工具提示中的定义列表。我试图将它直接添加到 data-tooltip 属性中，但它似乎无法识别标签。

Answer 1

在 materialize.js 中，围绕第 1258 行进行以下更改，将所有工具提示转换为 html。

// Change .text()
newTooltip.children('span').text(origin.attr('data-tooltip'));
// To .html()
newTooltip.children('span').html(origin.attr('data-tooltip'));

Answer 2

在最新版本中您可以使用：

  $(document).ready(function(){
    $('.tooltipped').tooltip({delay: 50, tooltip: 'some text', html: true});
  });

见http://materializecss.com/dialogs.html

Answer 3

在 Materialise v0.100.2 中可以使用 data-html 属性。如果设置了 data-html="true"，则 Materialize 呈现为 $(...).html()

所以这将呈现为 $(...).text()

<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>

这就是 $(...).html()

<a class="btn tooltipped" data-html="true" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>

将 HTML 标记添加到 materialize.css 工具提示

Add HTML markup to materialize.css tooltip

css

materialize