JSFiddle - React, Tailwind, and code Playground

HTML

<div title="There are two bubbles: One originating directly from the title-attribute, one via pseudo element.">Hover on me to see the bubble(s)</div>

<p>Question: How can I suppress the original title-bubble?</p>

CSS

div[title]{
    position: relative;
    display: inline-block;
    margin: 50px;
}
div[title]:hover:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    width: 150px;
    padding: 10px;
    background: #3C3F47;
    color: #DDD;
    text-align: left;
    
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

JavaScript

// The following doesn't help:
$('div[title]').bind('mouseenter mouseover hover',function(e){
    var div = $(this);
    div.attr('data-title',$(this).attr('title')).attr('title','');
});