Box with explanatory note not showing correctly when word is clicked

Question

I am trying to implement a feature on my website allowing users to trigger a pop-up box with an explanatory note when they click on specific words in the text.

In this question I found a nice example of how I would like such informative boxes to work. My idea was:

1. I test the code in the example on my website as it is
2. I make some modification for my purposes

However I am stuck at the first point. Even if my explantory note is shown once the related word is clicked, the surrounding box does not appear. You can see here a screenshot of what happens when one of the red words is clicked. Even if the box is not shown, I can drag it around and close it through the little white circle on the right of the text.

At first, I supposed the problem was the versions of jquey (I use 2.1.4) and jquery ui, so I tried several versions of jquery ui to check if I got any change in the box behaviour, but the problem persists. All the above occurs in Firefox browser, but I noticed that the box does not show at all using Chrome browser. I wonder if there is a way to make this work or if it is better to implement something different to show explanatory boxes.

The code I tested is the following:

CSS

.content span {
    text-decoration: underline;
    color: #da2f47;
    cursor: pointer;
}

HTML

<h4><b>Lorem</b></h4>
<div class="content">
<p style="text-align:left;">Lorem ipsum <span>dolor</span> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <span>labore</span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <span>voluptate</span> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="dialog" title=""></div>

javascript

var explanations = {
    "dolor": "Explanation about dolor.",
    "labore": "Explanation about labore.",
    "voluptate": "Explanation about voluptate."
}; 

$(".content").on("click", "span", function(e) {
    e.stopPropagation();
    var $this = $( this ),
        _text = $this.text();

    var dialogContent = explanations[_text.toLowerCase()];
    if(dialogContent && dialogContent.length > 0) {
        $( "#dialog" ).dialog({
            "modal": true,
            "title": _text
        }).html(dialogContent);
    }
});