如何显示显示单词更正的弹出对话框

Question

我正在创建一个单词更正扩展，它将错误的单词包装在一个 span 元素中。当用户将鼠标悬停在单词上时，将出现可能更正的下拉菜单。这是我的代码，它无法正常工作，目前它们彼此并排出现，如何将它们排成一行。

还有更好的方法吗？

$(".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">Por favor, leia as <span class="error" suggestions="reges,regra,regrãs,regres,regras,regrá,regrã,regôs,regre,regas,regro,regos" style="cursor: pointer;">regrs</span>. Meu <span class="error"
    suggestions="nom." style="cursor: pointer;">nom</span> é <span class="error" suggestions="Nícolas,Nicola,Ricolas,Picolas,Ni colas,Nicol as,Nicolaus,Unicolas,Nicolau" style="cursor: pointer;">Nicolas</span>.&nbsp;Brasil é o <span class="error"
    suggestions="unto,quento,quinto,quanto,queto,sunto,quito,quoto,cunto,munto,punto,junto,quinoto,quinteto,quiranto" style="cursor: pointer;">qunto</span> <span class="error" suggestions="mair,amor,moar,maro,mar,mor,maore,maori,maior,mafor,major,mora,maar"
    style="cursor: pointer;">maor</span> pais do mundo.</span>
  </span>
</div>

Answer 1

您的 listitem 元素使用的是 <span>，这是一个内联元素，以及为什么单词彼此相邻而不是彼此重叠显示。您可以使用不同的元素或将 class 添加到 listitem 元素以构成 display:block。在此示例中，我选择为 listitem class 添加 CSS。为了好玩，我还添加了悬停效果。

$(".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;
}

.listitem {
  display:block;
  margin:7px 0;
}

.listitem:hover {
  background-color:blue;
  color:white;
}

<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">Por favor, leia as <span class="error" suggestions="reges,regra,regrãs,regres,regras,regrá,regrã,regôs,regre,regas,regro,regos" style="cursor: pointer;">regrs</span>. Meu <span class="error"
    suggestions="nom." style="cursor: pointer;">nom</span> é <span class="error" suggestions="Nícolas,Nicola,Ricolas,Picolas,Ni colas,Nicol as,Nicolaus,Unicolas,Nicolau" style="cursor: pointer;">Nicolas</span>.&nbsp;Brasil é o <span class="error"
    suggestions="unto,quento,quinto,quanto,queto,sunto,quito,quoto,cunto,munto,punto,junto,quinoto,quinteto,quiranto" style="cursor: pointer;">qunto</span> <span class="error" suggestions="mair,amor,moar,maro,mar,mor,maore,maori,maior,mafor,major,mora,maar"
    style="cursor: pointer;">maor</span> pais do mundo.</span>
  </span>
</div>

如何显示显示单词更正的弹出对话框

How to display a popup dialog box that shows corrections for a word

html

javascript

css

popup