为什么鼠标移上去后，按钮会有一点点的移动-慕课网

首页课程实战体系课手记专栏慕课教程

为什么鼠标移上去后，按钮会有一点点的移动

来源：3-8 提示框--结构

Dear陈

2017-01-11 15:13

???

写回答关注

2回答

Dear陈: 2017-02-06 12:05:58

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
<meta name="viewport" content="width=device-width,minimun-scale=0.5,maximun-scale=1.0,initial-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="css/bootstrap.min.css" />
 <style>
 *{margin:0px;padding:0px;}
  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" 
          title="自拍"
          data-original-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>

  <h4>data-animation="true"</h4>
  <button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="left" 
  data-original-title="data-animation='true'"
  data-animation="true">data-animation="true"</button>
  
  <h4>data-html="true"</h4>
  <button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="top" 
  data-original-title="<h1>data-html='true'</h1>"
  data-html="true">data-html="true"</button>
  
  <h4>data-trigger="click"</h4>
  <button type="button" 
  class="btn btn-default" 
  data-toggle="tooltip" 
  data-placement="bottom" 
  data-original-title="data-trigger='click'"
  data-trigger="click"
  data-delay=2000>data-trigger="click"</button>
  
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
    $('#myTooltip').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:'top'
    });
    $('#myTooltip2').tooltip({
      title:"我是一个提示框，我在底部出现",
      placement:'bottom'
    });
});

</script>
</body>
</html>

0 0

kelleyq7

2017-01-14 23:05:36

没代码吗？

0 0

玩转Bootstrap（JS插件篇）

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

128652 学习 · 296 问题

查看课程

相似问题

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

回答 3

按钮点击后为什么没有效果

回答 3

为什么按钮点了没有反应

回答 1

点击按钮图片不动

回答 3

怎么慕课网上所有的点击按钮都没用？

回答 1

打开慕课网App查看更多内容