zoukankan      html  css  js  c++  java
  • 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);
            });
        });
    

      完美解决,

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

  • 相关阅读:
    Android——继续深造——从安装Android Studio 2.0开始(详)
    PHP——安装wampserver丢失MSVCR110.dll
    Marza Gift for GDC 2016
    Retrieve OpenGL Context from Qt 5.5 on OSX
    Space Time Varying Color Palette
    Screen Space Depth Varying Glow based on Heat Diffusion
    Visualization of Detail Point Set by Local Algebraic Sphere Fitting
    Glass Dragon
    Jump Flood Algorithms for Centroidal Voronoi Tessellation
    京都之行
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/8308968.html
Copyright © 2011-2022 走看看