当您将鼠标放在链接上时,我想在工具提示中显示图像.我正在使用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>
更多推荐
如何在工具提示中显示图像?
发布评论