程序员经验分享-hwhale

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

2024-01-01

当您将鼠标放在链接上时，我想在工具提示中显示图像。我正在使用 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:但它甚至不显示工具提示。


尝试这个。

<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

jspdf

如何在工具提示中显示图像？ 的相关文章