如何显示工具提示的图像？(How to show an image in tooltip?)

我要显示在工具提示中的图像时，你有你的鼠标在链接上。我使用的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调用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'/>"});

我试过，甚至把简单的文字content:但是它甚至不显示工具提示。

Answer 1:

尝试这个。

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(document).ready(function() { $("#content").html('<a id="magilla" href="#" title="" >Magilla Gorilla</a>'); $("#content #magilla").tooltip({ content: '<img src="https://i.etsystatic.com/18461744/r/il/8cc961/1660161853/il_794xN.1660161853_sohi.jpg" />' }); }); </script> </head> <body> <div id="content"> </div> </body> </html>

Answer 2:

下面是一个狙击的链路上的图像提示。我相信ü可以使用此代码为您的情况

 a.tooltip {outline:none; } a.tooltip strong {line-height:30px;} a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:60px; margin-left:-160px; width:300px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#EEE; 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;} /*CSS3 extras*/ a.tooltip span { border-radius:2px; box-shadow: 0px 0px 8px 4px #666; /*opacity: 0.8;*/ }

 <a href="https://codepen.io/anon/pen/rgPKvy" class="tooltip"> Link <span> <img class="callout" src="https://freefrontend.com/assets/img/css-tooltips/pure-css-tooltips.png" /> <img src="https://freefrontend.com/assets/img/css-tooltips/pure-css-tooltips.png" style="float:right;" /> <strong>CSS only Tooltip</strong><br /> Pure CSS popup tooltips with clean semantic XHTML. </span> </a>

文章来源: How to show an image in tooltip?