如何在工具提示中显示图像? [英] How to show an image in tooltip?
问题描述
当您将鼠标放在链接上时，我想在工具提示中显示图像.我正在使用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.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>
这篇关于如何在工具提示中显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
