は、私はこのようなポップアップを作成する必要があり、ブートストラップ

Question

を使用してポップアップを作成します。

私は、ブートストラップを使用していて、これまでのところ、私はこれをしようとしてきた：

HTML：

<a data-toggle="uid-popover" class="od-icon info-icon clientreference-info-button cursor-pointer"></a> 

Javascriptを：それが可能だ場合

var popoverTemplate = ['<div class="timePickerWrapper popover">', 
    '<div class="arrow"></div>', 
    '<div class="popover-content">', 
    '</div>', 
    '</div>'].join(''); 

    var content = ['<div>TEST</div>', ].join(''); 

    $('[data-toggle="uid-popover"]').popover({ 
     content: content, 
     template: popoverTemplate, 
     placement: "up", 
     html: true 
    }); 

は、私が知りたいのですがホバリング項目のすぐ前にポップアップを置くことができますが、 "配置"パラメータは "上、下、左、右"入力しか受け付けないので、できません。

ブートストラップの有無にかかわらずポップアップを簡単にする方法があれば、本当に感謝しています。

ありがとうございました。

Answer 1

次のように手動で設定できます。私はリンクを挿入できませんでしたまた、スニペットを作成できませんでした作成してください。

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
<p>Click on button to see Popover</p> 
<div style="width:200px; margin: 0 auto;"> 
<a href="#" id="example" class="btn btn-primary" rel="popover" data-content="This is the body of Popover" data-original-title="Creativity Tuts">pop</a> 
</div> 


$(function() { 
$('#example').popover(); 
$('#example').on("shown.bs.popover",function(e){ 
$(".arrow").hide(); 
var d = $(".popover")[0]; 
d.style.left = ((d.offsetLeft) - ($(".popover").width()/1.4)) + "px"; 
d.style.top = ((d.offsetTop) + ($(".popover").height()-15)) + "px"; 
}) 
});