zoukankan      html  css  js  c++  java
  • 将bootstrap弹出框的点击弹出改为鼠标移入弹出

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    </head>
    <body>
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
      Popover on 左侧
    </button>
    
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
      Popover on 顶部
    </button>
    
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Vivamus
    sagittis lacus vel augue laoreet rutrum faucibus.">
      Popover on 底部
    </button>
    
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
      Popover on 右侧
    </button>
    <p>在代码中加入data-trigger="hover"即可</p>
    <script> $(function () { $("[data-toggle='popover']").popover(); }); </script> </body> </html>
  • 相关阅读:
    linux-centos7 安装 maven 代码管理工具,以及常见配置
    linux-centos7 安装 jre + tomcat 实现 web 服务器
    python 开发语言 博客目录
    生存分布函数
    债务偿还
    密度聚类算法
    POI兴趣点搜索
    区域地址搜索
    地址之间的距离
    地理坐标转换
  • 原文地址:https://www.cnblogs.com/tnnyang/p/5083260.html
Copyright © 2011-2022 走看看