鼠标悬浮弹出提示时,右边button的会向左移动一点,why?

来源:3-9 提示框--JS触发提示框方法

百度哥

2017-04-25 18:52

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>触发提示框方法</title>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


  <style id="jsbin-css">

  body {

    padding: 100px;

  }

  .btn {

    margin: 20px 10px 20px;

  }

  </style>

</head>

<body>

  <h3>按钮做的提示框</h3>

  <button type="button" 

          class="btn btn-default" 

          data-toggle="tooltip" 

          data-placement="left" 

          data-original-title="提示框居左" 

          title="">

  提示框居左      

  </button>

  <button type="button" 

          class="btn btn-default" 

          data-toggle="tooltip" 

          data-placement="top" 

          data-original-title="提示框在顶部">

   提示框在顶部

  </button>

  <button type="button" 

          class="btn btn-default" 

          data-toggle="tooltip" 

          data-placement="bottom" 

          data-original-title="提示框在底部">

  提示框在底部             

  </button>

  <button type="button" 

          class="btn btn-default" 

          data-toggle="tooltip" 

          data-placement="right" 

          data-original-title="提示框居右">

  提示框居右      

  </button>

  <h3>链接制作的提示框</h3>

  <a class="btn btn-primary" 

     data-toggle="tooltip" 

     data-placement="left" 

     title="提示框居左">

     提示框居左

  </a>

  <a class="btn btn-primary" 

     data-toggle="tooltip" 

     data-placement="top" 

     title="提示框在顶部">

     提示框在顶部

  </a>

  <a class="btn btn-primary" 

     data-toggle="tooltip" 

     data-placement="bottom" 

     title="提示框在底部">

     提示框在底部

  </a>

  <a class="btn btn-primary" 

     data-toggle="tooltip" 

     data-placement="right" 

     title="提示框在居右">

     提示框居右

  </a>

  <a href="##" 

     class="btn btn-primary" 

     id="myTooltip">

     我是提示框

  </a>

  <a href="##" 

     class="btn btn-primary" 

     id="myTooltip2">

     我是提示框2

  </a>

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <script>

  $(function(){

    $('[data-toggle="tooltip"]').tooltip();

    $('#myTooltip').tooltip({

      title:"我是一个提示框,我在顶部出现",

      placement:'top'

    });

  });

  </script>


</body>


    

</html>


写回答 关注

2回答

  • zhaiduting
    2018-12-15 23:25:47

    这是个缺陷

  • 精于勤荒于嬉
    2017-05-06 01:00:03

    popover弹出界面会导致整个界面包括背景页面的滑动

玩转Bootstrap(JS插件篇)

带领大家学习怎么使用JS自由控制Bootstrap中提供的组件

128657 学习 · 296 问题

查看课程

相似问题