bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作

在bootstrap里面，有一个组件很可爱，它就是popover,它是对标签title属性的优化，奉上连接一枚：http://docs.demo.mschool.cn/components/popovers/

具体方法和实例在官网中讲解的很详细，不赘述；

由于本人用的是bootstrap4的版本，所以需要引入

tether.js,jquery.js,以及bootstrap.js,注意引入的顺序，千万不要颠倒顺序；
我写了这么一个HTML代码，如下：

 <p class="sheets-item-title-info">

                            <span class="text-warning"><i class="fa  fa-exclamation-triangle"></i>本答题卡使用的是高考统一答题卡，不可更改。</span>

                            <span class="text-muted rejigger-text">如何更改<i class="fa  fa-question-circle"></i></span>

                        </p>

　　那么我想鼠标移上的时候出现一段文字加一个连接，很明显我们只写一个poover("show"),是远远不够的，因为鼠标移上的时候弹出框接着就小时了，根本无法去点击连接，

那么怎么写呢？如下：

  $(".rejigger-text").popover({

            trigger: 'manual',

            placement: 'top',

            html: true,

            content: "<div class='rejigger-text-warp'><span class='rejigger-text-span'>若要更改为手动制作模版，请前去“创建试题结构”处点击“修改”或“重新创建试题结构”。</span><a href='#' class='rejigger-text-a'>前去更改>></a></div>",

            animation: false

        }).on("mouseenter", () => {

            $(".rejigger-text").popover("show");

            $(".rejigger-text-warp").on("mouseleave", () => {

                $(".rejigger-text").popover('hide');

            });

        }).on("mouseleave", () => {

            setTimeout(() => {

                if (!$(".popover:hover").length) {

                    $(".rejigger-text").popover("hide")

                }

            }, 100);

        });

    });

　　完美解决，

不懂的可以加博主一起探究