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

编程入门行业动态更新时间:2024-10-24 16:22:55

本文介绍了如何在工具提示中显示图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

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

I want to show an image in a tooltip when you have your mouse on a link. I'm using HTML, CSS and JAVASCRIPT/JQUERY. I have my image saved in a folder so I reference it from localhost.

我尝试通过JQuery设置工具提示的内容:

I have tried to set the content of the tooltip 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"); });

并且我尝试将工具提示的内容设置为纯HTML:

And I have tried to set the content of the tooltip in pure 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中:

An then, in JQuery:

$(document).ready(function() { $('#informe').tooltip("option","html","true"); $('#informe').tooltip("option","animated","fade"); $('#informe').tooltip("option","placement","bottom"); });

我有一个链接，该链接在onclick上调用了一个可下载PDF的JS函数.我希望当您将鼠标放在链接上时，它会显示要生成的PDF的预览(简单图像).我已经尝试过在此页面其他问题中看到的解决方案，但是它们不起作用.

I have a link which on onclick calls a JS function that downloads a PDF. I want that when you put the mouse on the link, it shows a preview (a simple image) of the PDF you're about to generate. I have tried the solutions I've seen in other questions of this page but they don't work.

这是我处理链接的方式:

This is how I dispose the link:

<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:中放入简单的文本，但甚至没有显示工具提示.

I've tried even to put simple text in content: but it doesn't even show a tooltip.

推荐答案

尝试一下.

<!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/ui/1.12.1/themes/base/jquery-ui.css"> <script src="code.jquery/jquery-1.12.4.js"></script> <script src="code.jquery/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="i.etsystatic/18461744/r/il/8cc961/1660161853/il_794xN.1660161853_sohi.jpg" />' }); }); </script> </head> <body> <div id="content"> </div> </body> </html>