使用創建彈出引導

，然後將其綁定到一個HTML元素，使徘徊時，它出現。

我使用的是引導，而到目前爲止，我一直在努力這樣的：

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 
    });

我想知道這是否是可能的在懸停項目前面找到彈出窗口，但我無法做到這一點，因爲「placement」參數只接受「上，下，左，右」輸入。

如果還有其他方法可以使用或不用bootstrap使彈出窗口更容易，我會非常感激的知道。

謝謝。

來源

2017-01-05 avilac

你可以使用QTip2經過優化，以創建彈出，你可以很容易地定位你的彈出 –

你是什麼意思'找到彈出只是在徘徊item'面前 - 你的意思是它的左邊？超過它？ –

@AlexandreT我會研究這種可能性，謝謝！ – avilac

您可以像下面那樣手動進行設置。請創建小提琴我無法插入鏈接也無法創建一個片段。

<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"; 
}) 
});

來源

2017-01-05 11:16:10 Maharshi

使用創建彈出引導

回答

相關問題