.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ā) 
這條路上的你我她 有誰(shuí)迷路了嗎 
 
我們說(shuō)好不分離 要一直一直在一起 
就算與時(shí)間為敵 就算與全世界背離 
風(fēng)吹亮雪花 吹白我們的頭發(fā) 
當(dāng)初說(shuō)一起闖天下 你們還記得嗎 
 
那一年盛夏 心愿許的無(wú)限大 
我們手拉手也成舟 劃過(guò)悲傷河流 
 
你曾說(shuō)過(guò)不分離 要一直一直在一起 
現(xiàn)在我想問(wèn)問(wèn)你 是否只是童言無(wú)忌 
 
天真歲月不忍欺 青春荒唐我不負(fù)你 
大雪求你別抹去 我們?cè)谝黄鸬暮圹E 
 
大雪也無(wú)法抹去 我們給彼此的印記 
今夕何夕 青草離離 
明月夜送君千里 等來(lái)年 秋風(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ā) 
 這條路上的你我她 有誰(shuí)迷路了嗎 
 " 
 data-original-title="時(shí)間煮雨" 
 >左側(cè)</a> 
 <a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content= 
 " 
我們說(shuō)好不分離 要一直一直在一起 
就算與時(shí)間為敵 就算與全世界背離 
風(fēng)吹亮雪花 吹白我們的頭發(fā) 
當(dāng)初說(shuō)一起闖天下 你們還記得嗎 
 " data-original-title="時(shí)間煮雨"> 
 上部 
 </a> 
 <a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content= 
 " 
那一年盛夏 心愿許的無(wú)限大 
我們手拉手也成舟 劃過(guò)悲傷河流 
你曾說(shuō)過(guò)不分離 要一直一直在一起 
現(xiàn)在我想問(wèn)問(wèn)你 是否只是童言無(wú)忌 
 " 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 
大雪也無(wú)法抹去 我們給彼此的印記 
今夕何夕 青草離離 
明月夜送君千里 等來(lái)年 秋風(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…})