Các phần thích hợp của những gì tôi đã thử ở đây:
<a href="#" data-content="<div id='my_popover'></div>"> Click here </a>
$(".button").popover({html: true})
$(".button").click(function(){
$(this).popover('show');
$("#my_popover").load('my_stuff')
})
Khi tôi nhấp vào, tôi thấy yêu cầu được thực hiện, nhưng không điền vào cửa sổ bật lên. Tôi thậm chí không thấy HTML cho popover được thêm vào DOM, nhưng đó có thể là firebug.
Có ai đã thử điều này?
'shown.bs.popover'xử lý: stackoverflow.com/a/39028723/1371408
Câu trả lời:
Xem bài đăng trên blog của tôi để biết giải pháp hoạt động: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4
Đầu tiên, chúng ta nên thêm thuộc tính data-poload vào các phần tử mà bạn muốn thêm cửa sổ bật lên. Nội dung của thuộc tính này phải là url được tải (tuyệt đối hoặc tương đối):
<a href="#" title="blabla" data-poload="/test.php">blabla</a>
Và trong JavaScript, tốt nhất là trong $ (tài liệu) .ready ();
$('*[data-poload]').hover(function() {
var e=$(this);
e.off('hover');
$.get(e.data('poload'),function(d) {
e.popover({content: d}).popover('show');
});
});
off('hover')ngăn tải dữ liệu nhiều lần vàpopover()liên kết một sự kiện di chuột mới. Nếu bạn muốn dữ liệu được làm mới tại mỗi sự kiện di chuột, bạn nên loại bỏ phần tắt.Vui lòng xem JSFiddle hoạt động của ví dụ.
htmllên true, sau đó đặt thuộc contenttính thành thẻ HTML iframe, chẳng hạn như content: '<iframe src="http://www.google.com"></iframe>'. Bạn cũng sẽ cần ghi đè thuộc max-widthtính của cửa sổ bật lên bằng CSS và rất có thể cũng phải xóa kiểu dáng của iframe bằng CSS.
e.off('hover')phương pháp
Hoạt động tốt cho tôi:
$('a.popup-ajax').popover({
"html": true,
"content": function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).attr('href'), div_id);
}
});
function details_in_popup(link, div_id){
$.ajax({
url: link,
success: function(response){
$('#'+div_id).html(response);
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}
Sau khi đọc tất cả các giải pháp này, tôi nghĩ rằng giải pháp sẽ trở nên đơn giản hơn nhiều nếu bạn sử dụng một lệnh gọi ajax đồng bộ . Sau đó, bạn có thể sử dụng một cái gì đó như:
$('#signin').popover({
html: true,
trigger: 'manual',
content: function() {
return $.ajax({url: '/path/to/content',
dataType: 'html',
async: false}).responseText;
}
}).click(function(e) {
$(this).popover('toggle');
});
async: falsegiết chết này cho tôi
Tôi đã cập nhật câu trả lời phổ biến nhất. Nhưng trong trường hợp những thay đổi của tôi không được chấp thuận, tôi đưa ra đây một câu trả lời riêng.
Sự khác biệt là:
Đầu tiên, chúng ta nên thêm thuộc tính data-poload vào các phần tử mà bạn muốn thêm cửa sổ bật lên. Nội dung của thuộc tính này phải là url được tải (tuyệt đối hoặc tương đối):
<a href="#" data-poload="/test.php">HOVER ME</a>
Và trong JavaScript, tốt nhất là trong $ (tài liệu) .ready ();
// On first hover event we will make popover and then AJAX content into it.
$('[data-poload]').hover(
function (event) {
var el = $(this);
// disable this event after first binding
el.off(event);
// add initial popovers with LOADING text
el.popover({
content: "loading…", // maybe some loading animation like <img src='loading.gif />
html: true,
placement: "auto",
container: 'body',
trigger: 'hover'
});
// show this LOADING popover
el.popover('show');
// requesting data from unsing url from data-poload attribute
$.get(el.data('poload'), function (d) {
// set new content to popover
el.data('bs.popover').options.content = d;
// reshow popover with new content
el.popover('show');
});
},
// Without this handler popover flashes on first mouseout
function() { }
);
off('hover')ngăn tải dữ liệu nhiều lần và popover()liên kết một sự kiện di chuột mới. Nếu bạn muốn dữ liệu được làm mới tại mỗi sự kiện di chuột, bạn nên loại bỏ phần tắt.
Vui lòng xem JSFiddle hoạt động của ví dụ.
Một biến thể của mã từ Çağatay Gürtürk, thay vào đó bạn có thể sử dụng hàm ủy nhiệm và buộc ẩn cửa sổ bật lên trên hoverout.
$('body').delegate('.withajaxpopover','hover',function(event){
if (event.type === 'mouseenter') {
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.unbind('hover').popover({content: d}).popover('show');
});
} else {
$(this).popover('hide');
}
});
Giải pháp của Çağatay Gürtürk rất hay nhưng tôi đã trải qua sự kỳ lạ tương tự được mô tả bởi Luke The Obscure:
Khi tải ajax kéo dài quá nhiều (hoặc các sự kiện chuột diễn ra quá nhanh), chúng tôi có .popover ('hiển thị') và không có .popover ('ẩn') trên một phần tử nhất định khiến cửa sổ bật lên vẫn mở.
Tôi thích giải pháp tải trước khổng lồ này, tất cả nội dung cửa sổ bật lên được tải và các sự kiện được xử lý bởi bootstrap giống như trong cửa sổ bật lên thông thường (tĩnh).
$('.popover-ajax').each(function(index){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.popover({content: d});
});
});
Vào năm 2015, đây là câu trả lời tốt nhất
$('.popup-ajax').mouseenter(function() {
var i = this
$.ajax({
url: $(this).attr('data-link'),
dataType: "html",
cache:true,
success: function( data{
$(i).popover({
html:true,
placement:'left',
title:$(i).html(),
content:data
}).popover('show')
}
})
});
$('.popup-ajax').mouseout(function() {
$('.popover:visible').popover('destroy')
});
Giải pháp khác:
$target.find('.myPopOver').mouseenter(function()
{
if($(this).data('popover') == null)
{
$(this).popover({
animation: false,
placement: 'right',
trigger: 'manual',
title: 'My Dynamic PopOver',
html : true,
template: $('#popoverTemplate').clone().attr('id','').html()
});
}
$(this).popover('show');
$.ajax({
type: HTTP_GET,
url: "/myURL"
success: function(data)
{
//Clean the popover previous content
$('.popover.in .popover-inner').empty();
//Fill in content with new AJAX data
$('.popover.in .popover-inner').html(data);
}
});
});
$target.find('.myPopOver').mouseleave(function()
{
$(this).popover('hide');
});
Ý tưởng ở đây là để kích hoạt bằng tay màn hình hiển thị của PopOver với mouseenter & MouseLeave sự kiện.
Trên mouseenter , nếu không có PopOver nào được tạo cho mục của bạn ( if ($ (this) .data ('popover') == null) ), hãy tạo nó. Điều thú vị là bạn có thể xác định nội dung PopOver của riêng mình bằng cách chuyển nó dưới dạng đối số ( mẫu ) cho hàm popover () . Đừng quên đặt tham số html thành true .
Ở đây tôi chỉ tạo một mẫu ẩn có tên là popovertemplate và sao chép nó với JQuery. Đừng quên xóa thuộc tính id sau khi bạn sao chép nó, nếu không, bạn sẽ kết thúc với các id trùng lặp trong DOM. Cũng lưu ý rằng style = "display: none" để ẩn mẫu trong trang.
<div id="popoverTemplateContainer" style="display: none">
<div id="popoverTemplate">
<div class="popover" >
<div class="arrow"></div>
<div class="popover-inner">
//Custom data here
</div>
</div>
</div>
</div>
Sau bước tạo (hoặc nếu nó đã được tạo), bạn chỉ cần hiển thị popOver với $ (this) .popover ('show');
Sau đó, cuộc gọi Ajax cổ điển. Để thành công, bạn cần phải làm sạch nội dung cửa sổ bật lên cũ trước khi đưa dữ liệu mới mới từ máy chủ . Làm cách nào để chúng tôi có được nội dung popover hiện tại? Với bộ chọn .popover.in ! Lớp .in chỉ ra rằng cửa sổ bật lên hiện đang được hiển thị, đó là mẹo ở đây!
Để kết thúc, trên sự kiện mouseleave , chỉ cần ẩn cửa sổ bật lên.
Đây là giải pháp của tôi cũng hoạt động tốt với nội dung được tải ajax.
/*
* popover handler assigned document (or 'body')
* triggered on hover, show content from data-content or
* ajax loaded from url by using data-remotecontent attribute
*/
$(document).popover({
selector: 'a.preview',
placement: get_popover_placement,
content: get_popover_content,
html: true,
trigger: 'hover'
});
function get_popover_content() {
if ($(this).attr('data-remotecontent')) {
// using remote content, url in $(this).attr('data-remotecontent')
$(this).addClass("loading");
var content = $.ajax({
url: $(this).attr('data-remotecontent'),
type: "GET",
data: $(this).serialize(),
dataType: "html",
async: false,
success: function() {
// just get the response
},
error: function() {
// nothing
}
}).responseText;
var container = $(this).attr('data-rel');
$(this).removeClass("loading");
if (typeof container !== 'undefined') {
// show a specific element such as "#mydetails"
return $(content).find(container);
}
// show the whole page
return content;
}
// show standard popover content
return $(this).attr('data-content');
}
function get_popover_placement(pop, el) {
if ($(el).attr('data-placement')) {
return $(el).attr('data-placement');
}
// find out the best placement
// ... cut ...
return 'left';
}
Nếu nội dung trong cửa sổ bật lên không có khả năng thay đổi, bạn chỉ nên truy xuất nội dung đó một lần. Ngoài ra, một số giải pháp ở đây có vấn đề là nếu bạn di chuyển nhanh qua nhiều "bản xem trước", bạn sẽ nhận được nhiều cửa sổ bật lên đang mở. Giải pháp này giải quyết cả hai điều đó.
$('body').on('mouseover', '.preview', function()
{
var e = $(this);
if (e.data('title') == undefined)
{
// set the title, so we don't get here again.
e.data('title', e.text());
// set a loader image, so the user knows we're doing something
e.data('content', '<img src="/images/ajax-loader.gif" />');
e.popover({ html : true, trigger : 'hover'}).popover('show');
// retrieve the real content for this popover, from location set in data-href
$.get(e.data('href'), function(response)
{
// set the ajax-content as content for the popover
e.data('content', response.html);
// replace the popover
e.popover('destroy').popover({ html : true, trigger : 'hover'});
// check that we're still hovering over the preview, and if so show the popover
if (e.is(':hover'))
{
e.popover('show');
}
});
}
});
Tôi nghĩ rằng giải pháp của tôi đơn giản hơn với chức năng mặc định.
http://jsfiddle.net/salt/wbpb0zoy/1/
$("a.popover-ajax").each(function(){
$(this).popover({
trigger:"focus",
placement: function (context, source) {
var obj = $(source);
$.get(obj.data("url"),function(d) {
$(context).html( d.titles[0].title)
});
},
html:true,
content:"loading"
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Cras justo odio</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Dapibus ac facilisis in</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Morbi leo risus</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Porta ac consectetur ac</a></li>
<li class="list-group-item"><a href="#" data-url="https://tr.instela.com/api/v2/list?op=today" class="popover-ajax">Vestibulum at eros</a></li>
</ul>Tôi đã thử giải pháp của Çağatay Gürtürk nhưng có cùng điều kỳ lạ với Luke the Ít người biết đến. Sau đó đã thử giải pháp của Asa Kusuma. Điều này hoạt động, nhưng tôi tin rằng Ajax sẽ đọc mỗi khi cửa sổ bật lên được hiển thị. Lệnh gọi hủy liên kết ('hover') không có hiệu lực. Đó là bởi vì ủy quyền đang giám sát các sự kiện trong một lớp cụ thể - nhưng lớp đó không thay đổi.
Đây là giải pháp của tôi, dựa trên Asa Kusuma. Các thay đổi:
delegatebằng onđể khớp với các thư viện JQuery mới. / * Mục tiêu: Hiển thị chú giải công cụ / cửa sổ bật lên nơi nội dung được tải xuống từ
ứng dụng lần đầu tiên duy nhất.
Cách thực hiện: Tìm nạp nội dung phù hợp và đăng ký chú giải công cụ / cửa sổ bật lên lần đầu tiên
chuột nhập phần tử DOM có lớp "withajaxpopover". Gỡ bỏ
lớp từ phần tử để chúng tôi không làm điều đó vào lần sau khi con chuột vào.
Tuy nhiên, điều đó không hiển thị chú giải công cụ / cửa sổ bật lên lần đầu tiên
(vì chuột đã được nhập khi chú giải công cụ được đăng ký).
Vì vậy, chúng ta phải tự mình hiển thị / ẩn nó đi.
* /
$ (function () {
$ ('body'). on ('hover', '.withajaxpopover', function (event) {
if (event.type === 'mouseenter') {
var el = $ (this);
$ .get (el.attr ('data-load'), function (d) {
el.removeClass ('withajaxpopover')
el.popover ({trigger: 'hover',
tiêu đề: d.title,
content: d.content}). popover ('show');
});
} khác {
$ (this) .popover ('hide');
}
});
});
Tôi đã thử một số gợi ý ở đây và tôi muốn trình bày của tôi (hơi khác một chút) - Tôi hy vọng nó sẽ giúp ích cho ai đó. Tôi muốn hiển thị cửa sổ bật lên khi nhấp chuột đầu tiên và ẩn nó khi nhấp chuột thứ hai (tất nhiên với việc cập nhật dữ liệu mỗi lần). Tôi đã sử dụng một biến bổ sung visableđể biết liệu cửa sổ bật lên có hiển thị hay không. Đây là mã của tôi: HTML:
<button type="button" id="votingTableButton" class="btn btn-info btn-xs" data-container="body" data-toggle="popover" data-placement="left" >Last Votes</button>
Javascript:
$('#votingTableButton').data("visible",false);
$('#votingTableButton').click(function() {
if ($('#votingTableButton').data("visible")) {
$('#votingTableButton').popover("hide");
$('#votingTableButton').data("visible",false);
}
else {
$.get('votingTable.json', function(data) {
var content = generateTableContent(data);
$('#votingTableButton').popover('destroy');
$('#votingTableButton').popover({title: 'Last Votes',
content: content,
trigger: 'manual',
html:true});
$('#votingTableButton').popover("show");
$('#votingTableButton').data("visible",true);
});
}
});
Chúc mừng!
<button type="button" id="popover2" title="" data-content="<div id='my_popover' style='height:250px;width:300px;overflow:auto;'>Loading...Please Wait</div>" data-html="true" data-toggle="popover2" class="btn btn-primary" data-original-title="A Title">Tags</button>
$('#popover2').popover({
html : true,
title: null,
trigger: "click",
placement:"right"
});
$("#popover2").on('shown.bs.popover', function(){
$('#my_popover').html("dynamic content loaded");
});
Đây là một cách giải quyết một số vấn đề:
._popper.update() , tính toán lại vị trí của cửa sổ bật lên.max-width).var e = $("#whatever");
e.popover({
placement: "top",
trigger: "hover",
title: "Test Popover",
content: "<span class='content'>Loading...</span>",
html: true
}).on("inserted.bs.popover", function() {
var popover = e.data('bs.popover');
var tip = $(popover.tip);
tip.css("width", "100%");
$.ajax("/whatever")
.done(function(data) {
tip.find(".content").text(data);
popover._popper.update();
}).fail(function() {
tip.find(".content").text("Sorry, something went wrong");
});
});
popover._popper.update()và chắc chắn rằng popover, _poppervà updatetất cả đều có những giá trị mong đợi. Chắc chắn có thể là những điều đó đã thay đổi.
Có quá nhiều câu trả lời ở đây nhưng tôi cũng không tìm thấy câu trả lời nào trong số đó là những gì tôi muốn. Tôi đã mở rộng câu trả lời của Ivan Klass là cả Bootstrap 4 đều thích hợp và được lưu trữ thông minh.
Lưu ý rằng đoạn mã sẽ không thực sự tải địa chỉ từ xa do chính sách CORS của Stackoverflow.
var popoverRemoteContents = function(element) {
if ($(element).data('loaded') !== true) {
var div_id = 'tmp-id-' + $.now();
$.ajax({
url: $(element).data('popover-remote'),
success: function(response) {
$('#' + div_id).html(response);
$(element).attr("data-loaded", true);
$(element).attr("data-content", response);
return $(element).popover('update');
}
});
return '<div id="' + div_id + '">Loading...</div>';
} else {
return $(element).data('content');
}
};
$('[data-popover-remote]').popover({
html: true,
trigger: 'hover',
content: function() {
return popoverRemoteContents(this);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<span data-popover-remote="http://example.com/">Remote Popover test with caching</span>một câu trả lời tương tự như điều này đã được đưa ra trong chủ đề này: Đặt nội dung dữ liệu và hiển thị cửa sổ bật lên - đó là một cách tốt hơn để thực hiện những gì bạn hy vọng đạt được. Nếu không, bạn sẽ phải sử dụng tùy chọn live: true trong các tùy chọn của phương thức bật lên. Hy vọng rằng điều này sẽ giúp
$("a[rel=popover]").each(function(){
var thisPopover=$(this);
var thisPopoverContent ='';
if('you want a data inside an html div tag') {
thisPopoverContent = $(thisPopover.attr('data-content-id')).html();
}elseif('you want ajax content') {
$.get(thisPopover.attr('href'),function(e){
thisPopoverContent = e;
});
}
$(this).attr( 'data-original-title',$(this).attr('title') );
thisPopover.popover({
content: thisPopoverContent
})
.click(function(e) {
e.preventDefault()
});
});
lưu ý rằng tôi đã sử dụng cùng một thẻ href và làm cho nó không thay đổi trang khi nhấp vào, đây là một điều tốt cho SEO và cả nếu người dùng không có javascript!
Tôi đã sử dụng giải pháp ban đầu nhưng đã thực hiện một số thay đổi:
Đầu tiên, tôi sử dụng getJSON()thay get()vì vì tôi đang tải tập lệnh json. Tiếp theo, tôi đã thêm hành vi kích hoạt của di chuột để khắc phục sự cố cửa sổ bật lên dính.
$('*[data-poload]').on('mouseover',function() {
var e=$(this);
$.getJSON(e.data('poload'), function(data){
var tip;
$.each(data, function (index, value) {
tip = this.tip;
e.popover({content: tip, html: true, container: 'body', trigger: 'hover'}).popover('show');
});
});
});
Tôi đã thêm html: true, vì vậy nó không hiển thị đầu ra html thô, trong trường hợp bạn muốn định dạng kết quả của mình. Bạn cũng có thể thêm nhiều điều khiển hơn.
$('*[data-poload]').bind('click',function() {
var e=$(this);
e.unbind('click');
$.get(e.data('poload'),function(d) {
e.popover({content: d, html: true}).popover('show', {
});
});
});
Hiển thị cửa sổ bật lên ajax trên phần tử tĩnh với trình kích hoạt di chuột:
$('.hover-ajax').popover({
"html": true,
trigger: 'hover',
"content": function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).attr('href'), div_id);
}
});
function details_in_popup(link, div_id){
$.ajax({
url: link,
success: function(response){
$('#'+div_id).html(response);
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}
Html:
<span class="hover-ajax" href="http://domain.tld/file.php"> Hey , hoover me ! </span>
$('[data-poload]').popover({
content: function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).data('poload'), div_id, $(this));
},
delay: 500,
trigger: 'hover',
html:true
});
function details_in_popup(link, div_id, el){
$.ajax({
url: link,
cache:true,
success: function(response){
$('#'+div_id).html(response);
el.data('bs.popover').options.content = response;
}
});
return '<div id="'+ div_id +'"><i class="fa fa-spinner fa-spin"></i></div>';
}
Nội dung Ajax được tải một lần! xemel.data('bs.popover').options.content = response;
Tôi đã làm và nó hoạt động hoàn hảo với ajax và tải nội dung bật lên.
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
var attr = 'tooltip-user-id';
if ($('a['+ attr +']').length)
$('a['+ attr +']').popover({
html: true,
trigger: 'click hover',
placement: 'auto',
content: function () {
var this_ = $(this);
var userId = $(this).attr(attr);
var idLoaded = 'tooltip-user-id-loaded-' + userId;
var $loaded = $('.' + idLoaded);
if (!$loaded.length) {
$('body').append('<div class="'+ idLoaded +'"></div>');
} else if ($loaded.html().length) {
return $loaded.html();
}
$.get('http://example.com', function(data) {
$loaded.html(data);
$('.popover .popover-content').html(data);
this_.popover('show');
});
return '<img src="' + base_url + 'assets/images/bg/loading.gif"/>';
},
delay: {show: 500, hide: 1000},
animation: true
});
Bạn có thể xem qua http://kienthuchoidap.com . Di chuyển cái này và di chuột đến tên người dùng của người dùng.
Đối với tôi công việc thay đổi dữ liệu-nội dung befora tải bật lên:
$('.popup-ajax').data('content', function () {
var element = this;
$.ajax({
url: url,
success: function (data) {
$(element).attr('data-content', data)
$(element).popover({
html: true,
trigger: 'manual',
placement: 'left'
});
$(element).popover('show')
}})
})
Điều này phù hợp với tôi, mã này khắc phục sự cố căn chỉnh có thể:
<a class="ajax-popover" data-container="body" data-content="Loading..." data-html="data-html" data-placement="bottom" data-title="Title" data-toggle="popover" data-trigger="focus" data-url="your_url" role="button" tabindex="0" data-original-title="" title="">
<i class="fa fa-info-circle"></i>
</a>
$('.ajax-popover').click(function() {
var e = $(this);
if (e.data('loaded') !== true) {
$.ajax({
url: e.data('url'),
dataType: 'html',
success: function(data) {
e.data('loaded', true);
e.attr('data-content', data);
var popover = e.data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
var calculated_offset = popover.getCalculatedOffset(popover.options.placement, popover.getPosition(), popover.$tip[0].offsetWidth, popover.$tip[0].offsetHeight);
popover.applyPlacement(calculated_offset, popover.options.placement);
},
error: function(jqXHR, textStatus, errorThrown) {
return instance.content('Failed to load data');
}
});
}
});
Đề phòng trường hợp, điểm cuối tôi đang sử dụng trả về html (một phần rails)
Tôi đã lấy một số phần của mã từ đây https://stackoverflow.com/a/13565154/3984542