如何将图像转换为弹出按钮？

Question

我有一个基本的弹出按钮的以下代码，它的工作方式应该是：

<button type="button" class="popover-dismiss" data- container="body" data-toggle="popover" data-placement="right" data-content="This is a popover.">
    popover test
</button>

(和这个脚本)：

<script>
    $('.popover-dismiss').popover({
        trigger: 'focus'
    })
</script>

我想修改此弹出窗口，以便在单击图像时提示消息，而不是按钮。我的图片代码是：

<img src="./images/c4dlogo.png" alt="c4d" class="icon" c4d">

有没有办法做到这一点，我应该如何修改上面的代码才能做到这一点？

Answer 1

这对我很管用。请参考下面的示例。

​

$('.popover-dismiss').popover();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<img src="http://placehold.it/150/09f/fff.png?text=c4d-Logo" alt="c4d" class="icon popover-dismiss" data-toggle="popover" title="Popover Header" data-content="This is a popover." data-placement="right">

​