JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<p data-item="putin">Покажи мой итем</p>
<p data-item="medvedev">Покажи мой итем</p>
<p>Покажи мой итем</p>
<p data-item="yanukovich">Покажи мой итем</p>
<div>status</div>

CSS

p {
    cursor: pointer;
    background: #ddd;
    padding: 0px;
    margin: 0px 2px 0px 0px;
    display: inline-block;
    padding: 0px 5px;
}
div {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 30px;
    background: red;
    width: 100px;
    text-align: center;
    display: none;
}

JavaScript

$('p').hover(
    function(){ show_tip(this); },
    function(){ hide_tip(this); }    
);

function show_tip(that) {
    txt = $(that).data('item');
    if (!txt) return false;
    $('div').text(txt);
    $('div').fadeIn(300);
}

function hide_tip(that) {
    $('div').fadeOut(300);
    // в оригинальном коде тут тоже нужен $(that)
}