I have developed a word correction extension that encloses the incorrect word in a span element. Upon hovering over the word, a drop-down menu with possible corrections should be displayed. However, my current code is not functioning properly. How can I ensure that each correction appears aligned in a row rather than next to each other?
Is there a more efficient way to achieve this functionality?
$(".error").each(function(index, element) {
$(this).css('cursor', 'pointer');
$(this).mouseover(function() {
if ($(this).has('.popup-base').length > 0) {
return;
}
var popup = document.createElement('div');
popup.className = 'popup-base';
let correctionslist = element.getAttribute('suggestions').split(',');
for (correct of correctionslist) {
popup.innerHTML += '<span class="listitem">' + correct + ' </span>';
}
$(this).append(popup);
});
});.error {
background-color: yellow;
position: relative;
display: inline-block;
}
.popup-base {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.error:hover .popup-base {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable><span data-offset-key="6j93r-0-0"><span data-text="true">Please read the <span class="error" suggestions="rules,rule,rules,reges,regrãs,regres,regras,regrá,regro,regões,rego" style="cursor: pointer;">regs</span>. My name is <span class="error"
suggestions="nom." style="cursor: pointer;">nam</span>e <span class="error" suggestions="Nicolas,Nicola,Ricolas,Picolas,Ni colas,Nicol as,Nicolaus,Unicolas,Nicolau" style="cursor: pointer;">Nicolas</span>. Brazil is the <span class="error"
suggestions="unto,quento,quinto,quanto,suont,qunto,duento,vento,bento,torto,mundo" style="cursor: pointer;">best</span> country in the world.</span>
</span>
</div>