[on hover] image and text tooltip

when you hover on the image, it shows a text (tooltip)

by naocrrds

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/lspzyz3/xloqk6cgp/jquery.style-my-tooltips.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $("[title]").style_my_tooltips({
        tip_follows_cursor: true,
        tip_delay_time: 100,
        tip_fade_speed: 300,
        attribute: "title"
      });
    });
  })(jQuery);

</script>
</head>
<style>
  #s-m-t-tooltip {
    /* basic */
    max-width: 300px;
    z-index: 10;
    margin: 24px 14px 7px 12px;
    /* style and design */
    padding: 8px;
    font-size: 2rem;
    border-radius: 1rem;
    background: purple;
    color: white;
    font-family: archivo;
    box-shadow: -13px 14px 11px -8px rgba(0, 0, 0, 0.32) inset;
    -webkit-box-shadow: -13px 14px 11px -8px rgba(0, 0, 0, 0.32) inset;
    -moz-box-shadow: -13px 14px 11px -8px rgba(0, 0, 0, 0.32) inset;
  }

</style>
<img src="https://media.discordapp.net/attachments/890617367284027443/973075508524888124/on_Twittero.jpg?width=150&height=150" data-toggle="tooltip" title="Hello! Tooltip image on text shows when hovered" class="">

<br>

<p data-toggle="tooltip" title="Hello! Tooltip text" class=""> tooltip text. hover me</p>