javascript - 如何在工具提示中显示图像?
问题描述
当您将鼠标放在链接上时,我想在工具提示中显示图像。我正在使用 HTML、CSS 和 JAVASCRIPT/JQUERY。我将图像保存在一个文件夹中,因此我从 localhost 引用它。
我试图通过 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>
推荐阅读
- javascript - 使用浮点数时,fillRect() 不完全重叠
- batch-file - 具有两个条件和一个循环的批处理文件
- java - 克隆列表并将元素的属性修改为列表在 Java 中不起作用
- python - 如何在python中翻译撇号
- django - 无法使用 chart.js 查看工具提示数据
- javascript - 通过startsWith检索cookie值
- git - 如何使用多个文件恢复一个提交的单个文件
- javascript - 如何在长时间操作前使用 ReactJS 给用户即时反馈?
- c# - 实体框架 - 按降序排序,然后对该结果执行 Distinct 返回错误的结果
- ansible - 如何检查列表是否有 Ansible Rundeck 中的项目