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

Question

如何在工具提示中添加图片和文字？ 我的代码

<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" />' 
     }); 
});