Not sure why, but setting the popover's container
option fixed my problem, as shown in this fiddle.
Why does Bootstrap popover get squished when target is inside an affixed container?
-
04-06-2022 - |
Вопрос
This jsfiddle says it best, but I have a popover trigger that works fine. If I make the container affixed, however, the popover gets squished. Why and how to I remedy this?
<script type="text/javascript">
$(function () {
$(".popover-trigger").popover({
content: function () {
return $("#popover-content").html();
}
});
$(".btn").click(function(){
var jq = $(".popover-trigger").parent().toggleClass("affix");
var state = jq.hasClass("affix") ? "" : "not";
$(".state").html(state);
});
});
</script>
<div id="popover-content" class="hide">Lorem ipsum dolor sit amet ... </div>
<div class="container">
<div class="row">
<div class="well">
<div class="popover-trigger" data-trigger="hover" data-toggle="popover" data-original-title="Popover" data-html="true">
I'm <span class="state">not</span> affixed.
<button class="btn">Toggle</button>
</div>
</div>
</div>
</div>
Решение
Другие советы
See updated fiddle
I am no expert but defining the size of the popover in your CSS helps ensure that it keeps its shape. That is done by calling popover {height: x; width: y}
.
Не связан с StackOverflow