創建一個可點擊的提示JavaScript或引導

Question

是什麼力量讓一個可點擊的工具提示像在下面的圖片的最佳方式：

我應該使用引導或其他一些庫？

謝謝。

Answer 1

在這裏你去

$("#Pops").popover({ 
 
html: true, 
 
content: function() { 
 
    return $('#popover-content').html(); 
 
} 
 
});

[data-style=mypops] + .popover { 
 
background: #4194ca; 
 
} 
 
[data-style=mypops] + .popover.bottom .arrow:after { 
 
border-bottom-color: #4194ca; 
 
} 
 
[data-style=mypops] + .popover-content { 
 
} 
 
.popovermenu { 
 
list-style: none; 
 
padding: 0px; 
 
margin: 0px; 
 
} 
 
.popovermenu li { 
 
} 
 
.popovermenu li a { 
 
color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<div class="col-sm-4"> 
 
    <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-style="mypops" id="Pops">Click Me</button> 
 
    <div id="popover-content" class="hide"> 
 
     <ul class="popovermenu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </div> 
 
</div>

編輯：

• 自定義添加data-style="mypops"彈出按鈕並添加到css中，因此可以自定義彈出窗口而不會影響引導中的默認彈出窗口。
• 替換data-trigger="click"與data-trigger="focus"彈出按鈕，所以如果點擊一個鏈接或彈出窗口外，彈出窗口將被自動關閉。

Fiddle

Answer 2

您可以使用Bootstrap的彈出窗口並使用模板選項在工具提示中包含可點擊的鏈接。也有關於工具提示位置的選項。

$(function(){ 
    $("#example").popover({ 
     template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', 
     placement: 'right' 
    }); 
}); 

http://getbootstrap.com/javascript/#popovers-options