html - 如何在工具提示中添加图片和文字？

Question

如何在tooltip中添加图片和文字？我的代码

<div id="my-tooltip"> 
            <article class="service col-md-4 col-sm-6 col-xs-12">
              <img src="images/wine65.svg" class="img-circle tootltip"  alt="Sok od malina">

              <h3>Fruits</h3>
              <p>
              The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
              </p>
            </article>
        </div>

---

 <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

---

 <script>
    $(document).ready(function() {
        $('#my-tooltip').tooltipster({
            content: $('<img src="images/malina1.png" /> <strong>Sok od maline</strong>')
        });
    });
</script>

Answer 1

使用 Jquery UI 而不是 Tooltipster:

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

并添加以下脚本:

$(document).ready(function() {  
       $("#my-tooltip").tooltip({
           content: '<img src="images/malina1.png" />'
       });
});