Для изучения

by Anatoly Kulikov

HTML

<div id="words">
  <word title="Шустрая">The quick</word>
  <word title="бурая">brown</word>
  <word title="лисица">fox</word>
  <word title="прыгает">jumps</word>
  <word title="через">over</word>
  <word title="ленивого">the lazy</word>
  <word title="пса">dog</word>.
</div>

CSS

#words {
  display: block;
  width: 50%;
  margin: 70px auto;
  text-align: center;
}
word {
  display: inline-block;
  position: relative;
  cursor: pointer;
  color: #313131;
  transition: all linear .2s;
}
word:hover {
  color: #1565C0;
}
word:hover::before {
  content: attr(title);
  position: absolute;
  top: -2.15rem;
  display: inline-block;
  padding: 5px 7px;
  border-radius: 3px;
  text-align: left;
  box-shadow: #EEEEEE 0px 3px 6px;
  color: #313131;
  background: #FAFAFA;
}