使用具体化 CSS 在工具提示中显示图像

Question

我有以下HTML

<a href="#" title="" id="preview" class="waves-effect waves-blue btn blue lighten-2">Bunny</a>

以及以下 JS

$(document).ready(function(){
$("#preview").tooltip(
{
content: '<img src="bunny.jpg" />'
}
);
});

但是，当我将鼠标悬停在按钮上时，我得到的只是一个黑色的 1px x 10px 工具提示。我希望工具提示是一个图像，但似乎具体化正在阻碍这一点。

Answer 1

根据文档，您可以使用选项html.它可以采用常规的HTML代码。https://materializecss.com/tooltips.html

<a class="btn tooltipped" data-position="bottom">Hover me!</a>
$('.tooltipped').tooltip({
html: "<img src='path.png'>"
});

JSFIDDLE： https://jsfiddle.net/4wq1mnx5/9/