如何解决从 data-tippy-content 悬停时显示图像
当我从 data-tippy-content 中的 url 悬停在表格上时，我想显示图像。
到目前为止，我只是在悬停时以文本格式显示网址。
https://codepen.io/Ailaa/pen/YzpWjYv
据我所知，我应该以某种方式将图像传输到此脚本中的内容。
tippy('[data-tippy-content]',{
content: "MY IMAGE URL",})
有什么建议吗？
<div class="table-wrap">
<table class="table table--course">
<thead>
<tr>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
<th style="background-color: #444444; color: #ffffff;">Header X</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x351'>" tabindex="0">IMAGE 1</td>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x352''>" tabindex="0">IMAGE 2</td>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x353''>" tabindex="0">IMAGE 3</td>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x354''>" tabindex="0">IMAGE 4</td>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x355''>" tabindex="0">IMAGE 5</td>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x356''>" tabindex="0">IMAGE 6 </td>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x357''>" tabindex="0">IMAGE 7</td>
<td style="background-color: #444444; color: #ffffff;" class="tippy" data-toggle="tooltip" data-tippy-content="<img src='https://via.placeholder.com/550x358''>" tabindex="0">IMAGE 8</td>
</tr>
</tbody>
</table>
</div>
<script>
tippy('.tippy',{
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
