Javascript 如何在工具提示中显示图像？

我想在鼠标位于链接上时在工具提示中显示图像。我正在使用HTML、CSS和JAVASCRIPT/JQUERY。我的图像保存在一个文件夹中，所以我从localhost引用它

我尝试设置工具提示vía JQuery的内容：

$(document).ready(function() {
    $('#informe').tooltip("option","content","<img src='images/reports/informeInversiones.PNG' />");
    $('#informe').tooltip("option","html","true");
    $('#informe').tooltip("option","animated","fade");
    $('#informe').tooltip("option","placement","bottom");
});

我有一个链接，它在onclick上调用一个JS函数来下载PDF。我希望当你把鼠标放在链接上时，它会显示你将要生成的PDF的预览（一个简单的图像）。我已经尝试了我在本页其他问题中看到的解决方案，但它们不起作用

以下是我处理链接的方式：

<td colspan="2"><p><i class="fas fa-download"></i><a href="#" id="informe" title="">Generar Informe</a></p></td>

这是JQuery：

$('#informe').tooltip({content: "<img src='images/reports/informeInversiones.PNG'/>"});

$（'#informe'）。工具提示（{content:'}）；

---

我甚至尝试在

内容：

中添加简单文本，但它甚至没有显示工具提示。

这里是一个链接上的图像工具提示剪贴。我相信你可以用这个代码来处理你的案子

a.tooltip{outline:none；}
a、 工具提示强{行高：30px；}
a、 工具提示：悬停{文本装饰：无；}
a、 工具提示范围{
z索引：10；显示：无；填充：14px 20px；
上页边距：60px；左页边距：-160px；
宽度：300px；线宽：16px；
}
a、 工具提示：悬停范围{
显示：内联；位置：绝对；
边框：2倍纯色#FFF；颜色：#EEE；
背景：#333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png)重复-x0；
}
.callout{z-index:20；位置：绝对；边框：0；顶部：-14px；左侧：120px；}
/*CSS3额外服务*/
a、 工具提示范围
{
边界半径：2px；
盒影：0px 0px 8px 4px#666；
/*不透明度：0.8*/
}

试试这个

$（文档）.ready（函数（）{
$（“#内容”）.html（“”）；
$（“#content#magilla”）。工具提示（{content:'}）；
});

该问题中@laljitadani答案的可能重复对我没有帮助。我仍然可以在工具提示中看到图像。它不起作用。它不显示链接的标签（'Generar informe'）。我想用JQuery实现它

<td colspan="2"><p><i class="fas fa-download"></i><a href="#" id="informe" title="">Generar Informe</a></p></td>

$('#informe').tooltip({content: "<img src='images/reports/informeInversiones.PNG'/>"});