How to show a Twitter Bootstrap popover in a contenteditable div with inline CKEditor 4?

Question

The popover only shows until Ckeditor initializes. Is it possible to have the two work together?

Here is a demo:

http://jsfiddle.net/s2hxz99u/

HTML

<div contenteditable="true">Content
Oh, I love you so!     
        <span id="example" rel="popover"
   data-content="This is the body of Popover 1"
   data-original-title="Creativity Tuts">
   POPOVER EXAMPLE HERE
</span>
</div>
<p>

Lorem Ipsum
</p>

<span id="example2"rel="popover"
   data-content="This is the body of Popover 2"
   data-original-title="Creativity Tuts">
   POPOVER EXAMPLE 2  HERE
</span>

JS

CKEDITOR.config.toolbarGroups = [ 
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }
]; 

$('#example').popover('show');
$('#example2').popover('show');

Answer 1

First - you need to make sure your instance of ckeditor allows all tags and attributes.

CKEDITOR.editorConfig = function( config ) { 
    config.allowedContent = true;
    config.removeFormatAttributes = '';
}

Second - you need to initiate the the popover after the ckeditor is initiated.

CKEDITOR.on("instanceReady", function(event) {
    $('#example').popover('show');
    $('#example2').popover('show');
});

Here is an example: http://jsfiddle.net/ya7gybwc/