css实现tooltip

想起在群里有位群友问过一道面试题，怎么用css实现tooltip，第一解决方案大家可能是都是用title解决，但是会是这么简单吗？

面试题考察点

css实现tootip,个人感觉应该考点在于对css的熟悉程度。用title来实现tootip这个是基本上能解决问题的但是样式美化就是一个小问题。我来解决的话第一解决方案就是用css的attr属性，伪类，伪元素实现。

伪类 伪元素

   ****常见的状态伪类主要包括：****

a:link 应用于未被访问过的链接；
a:hover 应用于鼠标悬停到的元素；
:aactive 应用于被激活的元素；
a:visited 应用于被访问过的链接，与:link互斥。
a:focus 应用于拥有键盘输入焦点的元素。

   ****常见的结构性伪类包括：****

:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child