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

Question

当您将鼠标放在链接上时，我想在工具提示中显示图像。我正在使用 HTML、CSS 和 JAVASCRIPT/JQUERY。我将图像保存在一个文件夹中，因此我从本地主机引用它。

我试图通过 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");

});

我尝试在纯 HTML 中设置工具提示的内容：

<td colspan="2" id="informe" data-toggle="tooltip" title="<img src='images/reports/informeInversiones.PNG'/>"><p><i class="fas fa-download"></i><a id="save"> Generar Informe</a></p></td>

然后，在 JQuery 中：

$(document).ready(function() {

    $('#informe').tooltip("option","html","true");

    $('#informe').tooltip("option","animated","fade");

    $('#informe').tooltip("option","placement","bottom");

});

我有一个链接，onclick 调用一个下载 PDF 的 JS 函数。我希望当您将鼠标放在链接上时，它会显示您将要生成的 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'/>"});

我什至尝试过放入简单的文本，content:但它甚至没有显示工具提示。

Answer 1

这是链接上的图像工具提示的狙击。我相信您可以将此代码用于您的案例a.tooltip {outline:none; }a.tooltip strong {line-height:30px;}a.tooltip:hover {text-decoration:none;}&nbsp;a.tooltip span {&nbsp; &nbsp; z-index:10;display:none; padding:14px 20px;&nbsp; &nbsp; margin-top:60px; margin-left:-160px;&nbsp; &nbsp; width:300px; line-height:16px;}a.tooltip:hover span{&nbsp; &nbsp; display:inline; position:absolute;&nbsp;&nbsp; &nbsp; border:2px solid #FFF;&nbsp; color:#EEE;&nbsp; &nbsp; background:#333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;}.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}&nbsp; &nbsp;&nbsp;/*CSS3 extras*/a.tooltip span{&nbsp; &nbsp; border-radius:2px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; box-shadow: 0px 0px 8px 4px #666;&nbsp; &nbsp; /*opacity: 0.8;*/}<a href="https://codepen.io/anon/pen/rgPKvy" class="tooltip">&nbsp; &nbsp; Link&nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; <img class="callout" src="https://freefrontend.com/assets/img/css-tooltips/pure-css-tooltips.png" />&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://freefrontend.com/assets/img/css-tooltips/pure-css-tooltips.png" style="float:right;" />&nbsp; &nbsp; &nbsp; &nbsp; <strong>CSS only Tooltip</strong><br />&nbsp; &nbsp; &nbsp; &nbsp; Pure CSS popup tooltips with clean semantic XHTML.&nbsp; &nbsp; </span></a>