JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<h3 title="Fancy Title" id="title">YYYYYYY</h3>
<div id="message"></div>

CSS

.ui-tooltip {
    background: black;
    color: white;
    border: none;
    padding: 0;
    opacity: 1;
    min-width:320px;
 z-index:500;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
    font-weight:600;} .ui-tooltip-content a {color:#e50000;} .ui-tooltip-content a:hover {color:#e50000;}

JavaScript

$(document).ready(function(){ set_tooltip() });
$(window).resize(function(){ set_tooltip() });
function set_tooltip(){
     var wi = $(window).width();   
     var position;
     if (wi <= 800){   
        $('#message').text('less than 800');
        position = {
            my: "left+50 top",
            at: "center top"
        };
     } else {
       $('#message').text('greater than 800');
       position = {
            my: "left+200 top",
            at: "center top"      
       };
     }
    $('#title').tooltip({
        content: function () {
            return $(this).prop('title');
        },
        position: position,
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(

            function () {
                $(this).stop(true).fadeTo(400, 1);
            },

            function () {
                $(this).fadeOut("300", function () {
                    $(this).remove();
                })
            });
        }
    });
}