JSFiddle - React, Tailwind, and code Playground

HTML

<div ctitle="testing title">This is a text without icture tooltip</div>


<div ctitle="testing title with pic <img src='http://lorempixel.com/g/200/200/' />">This is text 2 WITH picture in tooltip</div>

JavaScript

$("[ctitle]").hover(
  function(e) {
    $("<div id='txt'>").css({
      "display": "none",
      "width": "auto",
      "height": "auto",
      "color": "#767676",
      "border": "solid 1px #767676",
      "font-size": "12px",
      "font-family": "Arial",
      "position": "absolute",
      "padding": "2px 3px 2px 3px",
      "background-color": "white",
      "box-shadow": "3px 3px 1px gray",
      "left": 0,
      "top": 0
    }).appendTo("body").html($(this).attr('ctitle')).stop().fadeToggle().css({
      "top": e.pageY,
      "left": e.pageX
    });

  },
  function() {
    $("[id='txt']").stop().fadeToggle(function(){
			$(this).remove();
		})
  }
);