javascript - Ajax Tooltip - 绕过所以不使用 bootstrap

Question

我在 stackoverflow.com 上找到了这段代码，我想问一下我该如何做同样的事情，但不使用 bootstrap，我只想使用 jquery(如果需要)？

下面的代码效果很好，但我想知道在不使用 Bootstrap 的情况下如何做到这一点。

感谢您的帮助。

代码:

<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">


<script type='text/javascript'>
//<![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 <img src='loading.gif />
                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() { }
    );
});//]]> 

</script>


<img src="alerts.gif" data-poload="test3.php?id=1"><BR><BR><BR>
<img src="alerts.gif" data-poload="test3.php?id=2"><BR><BR><BR>
<img src="alerts.gif" data-poload="test3.php?id=3"><BR><BR><BR>

Answer 1

检查一下:

// On first hover event we will make popover and then AJAX content into it.

$('[data-poload]').hover(function(event) {
  var el = $(this);
  // Commenting this (For testing purposes)
  $.get(el.data('poload'), function(d) {
    // set new content
    el.find('.tooltiptext').text(d);
  });
});

.tooltip {
    position: relative;
    display: table;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    border-radius: 6px;
    padding: 5px 10px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" data-poload="//demo2307137.mockable.io/test">
   <img src="alerts.gif"/>
   <br/><br/><br/>
  <span class="tooltiptext">Loading...</span>
</div>

<div class="tooltip" data-poload="//demo2307137.mockable.io/test">
   <img src="alerts.gif"/>
   <br/><br/><br/>
  <span class="tooltiptext">Loading...</span>
</div>