JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li><p>Très bien</p></li>
	<li><p>Bien</p></li>
	<li><p>Moyen</p></li>
	<li><p>Ça va</p></li>
	<li><p>Nul</p></li>
</ul>

CSS

ul {position:relative;display:inline-block;padding-right:150px;list-style:none}
li {float:right;width:30px;height:30px;border:2px solid #ccc;border-radius:20px;cursor:pointer;}
li:before {content:"";display:none;width:26px;height:26px;margin:2px;background:#589442;border-radius:13px;}
li:hover, li:hover~li {border-color:#589442;}
li:hover:before, li:hover~li:before {display:block;}
li:hover p {display:block;}
p {display:none;position:absolute;top:7px;right:0;padding:0 20px;margin:0;font:700 100%/24px arial, sans-serif;color:#fff;background:#589442;}
p:before {content:"";position:absolute;top:0;left:-24px;border:12px solid transparent;border-right-color:#589442;}