JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button name="add_to_cart" id="3" class="button add_to_cart" onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},300)" />Ajouter<div id="tooltip" class="tooltip"  style="display:none;">Article ajoute</div></button>
<button name="add_to_cart" id="3" class="button add_to_cart" onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},300)" />Ajouter<div id="tooltip" class="tooltip"  style="display:none;">Article ajoute</div></button>
<button name="add_to_cart" id="3" class="button add_to_cart" onclick="var target=childNodes[1];target.style.display='block';setTimeout(function(){target.style.display='none'},300)" />Ajouter<div id="tooltip" class="tooltip"  style="display:none;">Article ajoute</div></button>

CSS

.tooltip {
font-size: 10px;
color: #FFF000;
position: absolute;
padding: 3px 7px 3px 25px;
background: url(images/checkmark.png) 3px center no-repeat #1E90FF;
border: 1px solid #FFFFFF;
z-index: 9999;
}