Bootstrap 4 fix (for Popover style)

[benck]

I just created a bootstrap 4 fix for Popover style (Inline style works no problem) which includes the latest bootstrap 4.0.0 alpha 5 and jquery 3.1.1.

The main change is to comment out the "setPosition" part since the position is handled by Tether from BS4. Make sure you include Tether because it's required by Tooltip in BS4 and Fontawesome is used to replaced the old removed glyphicon buttons. (make sure to include Fontawesome if you don't want to change the code)

https://gist.github.com/benck/ed955584762b5667e8c6c270119c1fd3

[youradds]

Thanks @benck . I just tried this, but it still doesn't want to play ball for me. I have Tether added (Before BS 4), and then when you click and an editable image, it comes up with:

I've checked my CSS, and it all seems OK. If I remove the .popover-title, then it just shows an empty space (no content in it);

<div class="popover fade bs-tether-element bs-tether-enabled bs-tether-element-attached-middle bs-tether-element-attached-left bs-tether-target-attached-middle bs-tether-target-attached-right in" role="tooltip" id="popover544699" style="top: 0px; left: 0px; position: absolute; transform: translateX(1144px) translateY(438px) translateZ(0px);"><h3 class="popover-title">Enter a description</h3><div class="popover-content"> </div></div>

Any ideas?

Cheers

Andy

[Joyrex]

The gist worked for me - I'm on Bootstrap 4 Alpha 6, and X-Editable wasn't working until I applied this. I am going to replace the pixel graphics with FontAwesome (the spinner and close GIFs), and the only other issue I see with this fix is the buttons in the popover are oddly sized (probably again slight code/CSS changes needed)

[Joyrex]

The only thing I am noticing is despite the default popover position being top, it defaults to right - when declaring it via x-editable's placement data- attribute, it does render to top. However, the positioning is off - it wants to attach itself to the bottom of the element invoking the x-editable popover.

[EdnaldoNeimeg]

Yeah, I did it ;)

I made some improvements and now it's working perfectly (you'll might need to change your CSS) https://gist.github.com/EdnaldoNeimeg/c7279ccade22d590ad89f4e0fe456742

[lvmajor]

Don't know if it's still relevant to this issue, but bootstrap 4 will move to Popper.js instead of Tether.js, so it might(will) affect this.

[Joyrex]

Yes, it's broken now that Bootstrap 4 Beta 1 uses Popper.js

[rustemas]

The fix for Bootstrap 4 Beta is to change innerCss property from '.popover-content' to '.popover-body'' (line 4712).

Also, setPostion should contain an empty function, like this:

setPosition: function () { (function() {}).call(this.container()); }

[ghost]

Hi, mostly it worked for me, but somehow it conflicts with this:

https://github.com/thiagogmiranda/xeditable.ckeditor

[ghost]

hi, can someone give a hint of the css? (its indeed poping far right from the element)

[Kopyov]

Works fine, but remote source still doesn't work

[ilramdhan]

For those of you who are struggling to implement it on Bootstrap 4, maybe this can help.

For Bootstrap 4 its work, check this https://github.com/vitalets/x-editable/issues/1189#issue-2472436889