Qtip hide on destroy, show on hover, Dom cleaning like bootstrap tooltip

Question

I am using jquery qtip2 I want its behaviour just like bootstrap tooltips where

1. on hover tooltip shows up , also in DOM
2. on mouseout tooltip hides, removed from DOM as well

Objective:

My objective is I am using lots of qtips, and they are taking unnecessary space in DOM and I want qtip2 to create dom element only when it is active.

JSFIDDLE: https://jsfiddle.net/bababalcksheep/5unavg0q/4/

Can't seem to make it work.Should it not be feature by default. Am I missing something from Docs ?

HTML:

<a href="#test" class="qtiptxt" title="My tooltip text">Hover here!</a>

JS:

$(document).ready(function() {
  $('.qtiptxt').qtip({
    prerender: false,
    overwrite: true,
    hide: {
      event: 'mouseout'
    },
    events: {
      hide: function(event, api) {
        var target = api.elements.target;
        var targetOptions = api.options;
        // Destroy it immediately
        api.destroy(true);
        //re initialize using existing options
        $(target).qtip(targetOptions);
      }
    }
  });
});

Answer 1

It seems I did miss the docs. Here is the solution

https://jsfiddle.net/bababalcksheep/5unavg0q/7/

$(document).ready(function() {
  // 
  // from https://github.com/qTip2/qTip2/wiki/Events-Guide#delegation-on--live--delegate
  //
  $('.qtiptxt').on('mouseover', function(event) {
    $(this).qtip({
      prerender: false,
      overwrite: true,
      show: {
        event: event.type,
        ready: true
      },
      hide: {
        event: 'mouseout'
      },
      events: {
        hidden: function(event, api) {
          // Destroy it immediately
          api.destroy(true);
        }
      }
    }, event);
  });
  //
  //
});