hover`与`word_split`和`tooltip`的组合

Question

[如何将hover与word_split和tooltip组合在一起，以便当悬停任何单词时，会出现带有不同信息的工具提示？ （示例-单词的翻译）

有人可以教我如何正确执行此操作吗？我尝试合并的以下2个代码：文字分隔：http://jsfiddle.net/3HdKH/悬停文字：https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

我将非常感谢您的帮助。

Answer 1

我为您编写了一个示例，该示例结合了您发布的两个不同示例。您可以在下面运行一个摘录，以实际操作方式进行展示。

所以这是一个解释：

由于lettering库将您的单词分成单个跨度，因此使用word1, word2, word3...类，我使用jQuery的“属性始于”选择器（https://api.jquery.com/attribute-starts-with-selector/），然后在每个选择器上使用hover处理程序。

$("span[class^='word']").hover(...)

hover方法具有两种功能，一种用于将鼠标悬停在项目上，另一种用于将鼠标移开时。 （https://api.jquery.com/hover/）在那些jQuery方法中，$(this)指代项目本身（在这种情况下，每个<span>围绕每个单词）。

当您将鼠标悬停在一个单词上时，我将tooltip类添加到跨度中，并添加了一个新的div类tooltiptext，然后添加了一些内容。由于我不知道您希望工具提示阅读什么，因此我只输入了“工具提示内容”。 注意：这是每个单词都很难获得动态数据的地方，但是您可以使用AJAX查找或字典函数或其他任何可以为您提供工具提示内容的内容来完成此工作……将由您决定...

这是执行此操作的代码：

function() {
  $(this).addClass('tooltip').append('<div class="tooltiptext">tooltip content</div>');
}

然后，当您停止将鼠标悬停在单词上时，第二个函数将接管，这将删除工具提示类，并删除新的div：

function() {
  $(this).removeClass('tooltip').find('div').remove();
}

因此希望这可以让您开始所需的内容！

$(".word_split").lettering('words');
$("span[class^='word']").hover(
  function() {
    $(this).addClass('tooltip').append('<div class="tooltiptext">tooltip content</div>');
  }, 
  function() {
    $(this).removeClass('tooltip').find('div').remove();
  }
);

.word_split span:hover {
    font-weight:bold;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<p class="word_split">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit interdum fermentum. Aenean fermentum imperdiet augue, et venenatis lectus semper vel. Phasellus faucibus nulla in quam egestas eleifend. Cras tristique augue eget libero tristique condimentum. Mauris eget diam eget risus feugiat rutrum. Duis placerat lorem quis augue semper porttitor. Nullam iaculis dui feugiat erat condimentum rutrum. Sed at accumsan diam. Maecenas ut urna id velit posuere auctor in vel dui. Aenean consectetur dui in leo faucibus sed feugiat dui blandit. In accumsan diam vitae erat volutpat volutpat aliquam nunc euismod. Vivamus viverra lorem nulla. Quisque justo quam, adipiscing sit amet auctor non, laoreet sit amet nisl. Donec euismod lorem ac mi dictum volutpat. Donec ligula mi, varius ac auctor at, sollicitudin id elit. In auctor sodales ipsum nec consectetur. Sed lacinia varius nibh vitae vulputate.<p>