title: Ajax Tooltip - bypass so not to use bootstrap
body: <p>I found this code on stackoverflow.com and I would like to ask how do I do the same but without using bootstrap, I would only like to use jquery (if needed) ?</p>
  
  <p>The code below works great but I would like to know how would I do this without using bootstrap.</p>
  
  <p>Thanks for any help.</p>
  
  <p>CODE:</p>
  
  <pre><code>&lt;script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt;
  
  
  &lt;script type='text/javascript'&gt;
  //&lt;![CDATA[
  $(window).on('load', function() {
       // On first hover event we will make popover and then AJAX content into it.
      $('[data-poload]').hover(
          function (event) {
              var el = $(this);
  
              // disable this event after first binding 
              el.off(event);
  
              // add initial popovers with LOADING text
              el.popover({
                  content: "loading…", // maybe some loading animation like &lt;img src='loading.gif /&gt;
                  html: true,
                  placement: "auto",
                  container: 'body',
                  trigger: 'hover'
              });
  
              // show this LOADING popover
              el.popover('show');
  
              // requesting data from unsing url from data-poload attribute
              $.get(el.data('poload'), function (d) {
                  // set new content to popover
                  el.data('bs.popover').options.content = d;
  
                  // reshow popover with new content
                  el.popover('show');
              });
          },
          // Without this handler popover flashes on first mouseout
          function() { }
      );
  });//]]&gt; 
  
  &lt;/script&gt;
  
  
  &lt;img src="alerts.gif" data-poload="test3.php?id=1"&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;
  &lt;img src="alerts.gif" data-poload="test3.php?id=2"&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;
  &lt;img src="alerts.gif" data-poload="test3.php?id=3"&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;
  </code></pre>