how to add picture and text in tooltip?

Question

how to add picture and text in tooltip? My code

<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>

Possible duplicate http://stackoverflow.com/questions/15274123/how-do-you-add-an-image-to-a-jquery-tooltip — Simon M., Jul 03 '15 at 13:51

score 0 · Answer 1 · answered Jul 08 '15 at 12:34

Use Jquery UI instead of Tooltipster:

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

And add the following script:

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

how to add picture and text in tooltip?

1 Answers1