使用materialize 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/