从 data-tippy-content 悬停时显示图像

编程问答 2022-05-26

问题描述

当我从 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 (将#修改为@）

tippyjs