JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">
<p><a href="#" title="Změna teploty: 0.3°C &#10; &lt;strong&gt;Data!&lt;/strong&gt; dnes v 11:58h" class="js_title">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>

CSS

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color: #e5e5e5;
	border-radius:5px;
	padding:5px 10px;
	color: #000;
  text-align: left;
  white-space:pre-wrap;
}

JavaScript

$(function () {
    // Tooltip only Text
    $('.js_title').hover(function(){
            // Hover over code
            var title = $(this).attr('title');
            $(this).data('tipText', title).removeAttr('title');
            $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('fast');
    }, function() {
            // Hover out code
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
    }).mousemove(function(e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex })
    });
});