html - 当用户将鼠标悬停在单词上时，如何显示标题？

Question

代码示例如下:

<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>

如果用户将鼠标悬停在犬科动物 马科动物 或异源多倍体 上，我该如何做到这一点，我使用的标题然后可以向用户显示 dfn 标题，以便他知道每个更难的单词的意思？

Answer 1

只需使用标题作为 :after psuedo 的内容，然后在工具提示中显示它!

p {
  margin: 60px auto;
}
dfn {
  position: relative;
}
dfn:hover:after {
  content: attr(title);
  background: #fff;
  padding: 5px 12px;
  border: solid 1px #ddd;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>