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

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>

如果用户将鼠标悬停在 canine、 equine 或 allopolyploid（我使用的标题）上，我该怎么做然后可以向用户显示 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>

Answer 2

使用data-title 属性而不是title 并设置样式。

您也可以使用css 对其进行样式设置。

如果您只使用标题，则无法删除默认标题工具提示。

dfn {
  border-bottom: 1px dotted black;
  position: relative;
}
dfn[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

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

Answer 3

已经如你所愿了。

<span title="I am hovering over the text">This is the text I want to have a mousover</span>

鼠标悬停时显示标题。

否则你可以使用https://jqueryui.com/tooltip/。 包括 jQueryUI。

<script type="text/javascript">
   $(document).ready(function(){
   $(this).tooltip();
});
</script>

或者您可以尝试包含引导程序http://getbootstrap.com/javascript/#tooltips。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button>

Answer 4

将title 更改为数据属性并使用伪元素似乎是最合乎逻辑的

div {
  width: 50%;
  margin: 25px auto;
  bordeR: 1px solid grey;
  padding: 1em;
}
dfn {
  position: relative;
}
dfn:hover:after {
  display: block;
}
dfn:after {
  display: none;
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: 0;
  margin-top: -2em;
  white-space: nowrap;
  background: lightgreen;
  padding: .25em;
  border: 1px solid green;
}

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

这也意味着“标题”不会​​像新的工具提示类型对象一样显示。

但是请注意，这种方法有一些缺点，正如长 title 所指出的那样，存在溢出问题。