.bs-example 
 { 
  border-color:#ddd; 
  border-radius:4px 4px 0 0; 
  border-width:1px; 
  box-shadow:none; 
  margin-left:0; 
  margin-right:0; 
  border-style:solid; 
 } 
 .bs-example-popover .popover { 
 position: relative; 
 display: block; 
 float: left; 
 width: 240px; 
 margin: 20px; 
} 

<h1 class="page-header">3、彈出框</h1> 
 <div class="bs-example bs-example-popover"> 
 <div class="popover top"> 
 <div class="arrow"></div> 
 <h3 class="popover-title">Popover top</h3> 
 <div class="popover-content"> 
  <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
 </div> 
 </div> 
 <div class="popover right"> 
 <div class="arrow"></div> 
 <h3 class="popover-title">Popover right</h3> 
 <div class="popover-content"> 
  <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
 </div> 
 </div> 
 
 <div class="popover bottom"> 
 <div class="arrow"></div> 
 <h3 class="popover-title">Popover bottom</h3> 
 
 <div class="popover-content"> 
  <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
 </div> 
 </div> 
 
 <div class="popover left"> 
 <div class="arrow"></div> 
 <h3 class="popover-title">Popover left</h3> 
 <div class="popover-content"> 
  <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
 </div> 
 </div> 
 </div> 

<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 
 風(fēng)吹雨成花 時(shí)間追不上白馬 
你年少掌心的夢(mèng)話 依然緊握著嗎 
云翻涌成夏 眼淚被歲月蒸發(fā) 
這條路上的你我她 有誰迷路了嗎 
 
我們說好不分離 要一直一直在一起 
就算與時(shí)間為敵 就算與全世界背離 
風(fēng)吹亮雪花 吹白我們的頭發(fā) 
當(dāng)初說一起闖天下 你們還記得嗎 
 
那一年盛夏 心愿許的無限大 
我們手拉手也成舟 劃過悲傷河流 
 
你曾說過不分離 要一直一直在一起 
現(xiàn)在我想問問你 是否只是童言無忌 
 
天真歲月不忍欺 青春荒唐我不負(fù)你 
大雪求你別抹去 我們?cè)谝黄鸬暮圹E 
 
大雪也無法抹去 我們給彼此的印記 
今夕何夕 青草離離 
明月夜送君千里 等來年 秋風(fēng)起" 
 data-original-title="時(shí)間煮雨" 
 >點(diǎn)擊加載</a> 

<strong>js初始化：</strong> 
<script type="text/javascript"> 
 $("#a_pop").popover(); 
</script> 

<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content= 
 " 
 風(fēng)吹雨成花 時(shí)間追不上白馬 
 你年少掌心的夢(mèng)話 依然緊握著嗎 
 云翻涌成夏 眼淚被歲月蒸發(fā) 
 這條路上的你我她 有誰迷路了嗎 
 " 
 data-original-title="時(shí)間煮雨" 
 >左側(cè)</a> 
 <a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content= 
 " 
我們說好不分離 要一直一直在一起 
就算與時(shí)間為敵 就算與全世界背離 
風(fēng)吹亮雪花 吹白我們的頭發(fā) 
當(dāng)初說一起闖天下 你們還記得嗎 
 " data-original-title="時(shí)間煮雨"> 
 上部 
 </a> 
 <a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content= 
 " 
那一年盛夏 心愿許的無限大 
我們手拉手也成舟 劃過悲傷河流 
你曾說過不分離 要一直一直在一起 
現(xiàn)在我想問問你 是否只是童言無忌 
 " data-original-title="時(shí)間煮雨"> 
 下部 
 </a> 
 <a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content= 
 " 
 天真歲月不忍欺 青春荒唐我不負(fù)你 
大雪求你別抹去 我們?cè)谝黄鸬暮圹E 
大雪也無法抹去 我們給彼此的印記 
今夕何夕 青草離離 
明月夜送君千里 等來年 秋風(fēng)起 
 " data-original-title="時(shí)間煮雨"> 
 右側(cè) 
 </a> 
 </div> 
 <script type="text/javascript"> 
 $("#a_pop1").popover(); 
 $("#a_pop2").popover(); 
 $("#a_pop3").popover(); 
 $("#a_pop4").popover(); 
 </script> 

$('#myPopover').on('hidden.bs.popover',
function
() {
//
 do something…})