Justoverclock I don't know how to explain better than in my previous messages 😅
<style>
.ttt {
display: none;
position: absolute;
}
.tt:hover .ttt, .ttc:focus + .ttt, .ttt:focus {
display: block;
}
</style>
<span class="tt">
<span class="ttc" tabindex="0" aria-describedby="tt1" role="button">This has a tooltip.</span>
<span role="tooltip" id="tt1" class="ttt">This is a tooltip.</span>
</span>
The keyword can then be focused with tab or by clicking on it, and the screen readers knows that #tt1
describes it.