bootstrap提示標簽、提示框實現代碼

2019-11-19 18:13:00

字體：大中小

來源：轉載

供稿：網友

首先聊一聊提示標簽：

<body><div class="container"> <div class="row">  <div class="col-lg-6">   <p>    <a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="用來開發網站的">java</a>    一種語言   </p>   <p>    <a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="用來開發網站的">java</a>    一種語言   </p>  </div>  <div class="col-lg-6">   <p>    <a href="#" class="tool" data-toggle="tooltip" data-placement="left" title="用來開發網站的">java</a>    一種語言   </p>   <p>    <a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="用來開發網站的">java</a>    一種語言   </p>  </div> </div></div><script type="text/javascript" src="jquery/jquery.min.js"></script><script type="text/javascript" src="bootstrap/bootstrap.min.js"></script><script type="text/javascript"> //$('.tool').tooltip();  $('.tool').tooltip('show');  $('.tool').on('hidden.bs.tooltip', function () {   alert('隱藏了'); })</script></body>

效果：

下面講一講提示框：

<body><div class="container"> <div class="row">  <!--這邊用的hover觸發的-->  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" data-delay='{"show": 1000, "hide": 1000 }' data-trigger="hover">Click to toggle popover</button> </div></div><script type="text/javascript" src="jquery/jquery.min.js"></script><script type="text/javascript" src="bootstrap/bootstrap.min.js"></script><script type="text/javascript">$(function(){ $('.btn').popover('show');})</script></body>

效果：