Run jQuery Tooltip library on DOM items created after DOM load

Question

Problem

Below I have some JavaScript/jQuery which creates and injects a DIV into a webpage DOM.

After that happen it then creates a mouseover event on an element inside that new DIV.

The mouse event is supposed to show a tooltip when a div is hovered with the mouse.

The problem is that is now requires the user to hover the div a 1st time which does nothing visually and then a 2nd time which shows the tooltip.

I need to make it show the tooltip on the 1st hover. Right now it generates the tooltip on 1st hover and then on 2nd and higher hover count it runs it.

Question

How can I go about registering this hover event in a way that it will show on 1st hover of an item?

JSFiddle Demo: https://jsfiddle.net/jasondavis/9fpc3LLo/

Code that inits the hover event with the tooltip library on Line 323 of my JSFiddle Demo: https://jsfiddle.net/jasondavis/9fpc3LLo/

        // when picker item description text is too wide we hide the overflow and show "..." 
        // When ... is shown, we make a tooltip which will show the full length text when
        // the description is hovered over.  This text is all stored in the list item
        // <a data-title=""> attribute
        $(document).on('mouseenter', '.type-description', function(e) {
            var $this = $(this);
            if (this.offsetWidth < this.scrollWidth) {
                var text = $this.text();
                $this.attr("data-title", text);
                $this.tipper({
                    direction: "bottom",
                    follow: true
                });
            }
        }).mouseenter();

Answer 1

After initializing tipper, trigger your handler for mouseenter:

$this.tipper({
  direction: "bottom",
  follow: true
}).triggerHandler('mouseenter');