css - 使用具体化 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 工具提示。我希望工具提示成为图像，但似乎物化正在阻碍这一点。

标签： cssmaterialize

Answer 1

根据文档，您可以使用 option 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/