如何自定义 div 或 HTML 元素的属性以添加样式（如工具提示）？答案

【问题标题】：How can I customise an attribute of a div or an HTML element that is adding style like a tooltip?如何自定义 div 或 HTML 元素的属性以添加样式（如工具提示）？
【发布时间】：2015-09-29 09:22:15
【问题描述】：

我希望 esilizar 属性能够制作工具提示或类似性别之类的东西来使用 css 进行样式设置？

例子

<div data-tolltip="Some info" class="base">
    Some div container
</div>

【问题讨论】：

你想在 css 中制作工具提示？？
很抱歉我没有在这个问题上加上 css 标签，但是感谢 css 的回复

标签： javascript php css ajax

【解决方案1】：

这是一个纯 CSS 工具提示代码：

div[data-tolltip] { position:relative; display:inline-block;}
div[data-tolltip]:before { position:absolute; bottom:100%; left:10px; margin-bottom:-9px; content:""; width:0; height:0; border:9px solid transparent; border-top-color:#000; z-index:55555; display:none;}
div[data-tolltip]:after { position:absolute; bottom:100%; left:-5px; padding:8px 10px; margin-bottom:9px; content:attr(data-tolltip); display:none; background:#000; color:#fff; font:600 11px Arial, Helvetica, sans-serif; text-align:center; z-index:55555; border-radius:3px; text-shadow:1px 1px 1px rgba(0,0,0,.4);}
div[data-tolltip]:hover:before { display:block;}
div[data-tolltip]:hover:after { display:block;}

.base { margin-top:50px; margin-left:50px;}/*not required, It's for demo*/

<div data-tolltip="Some info" class="base">
    Some div container
</div>

【讨论】：

非常感谢，帮了我很多忙

【解决方案2】：

div {
  position: relative;
}
div:after {
  position: absolute;
  top: 0;
  background-color: darkblue;
  color: white;
  content: attr(data-tooltip);
  display: none;
}
div:hover::after {
  display: block;
}

<div data-tooltip="Some info" class="base">
  Some div container
</div>

【讨论】：

非常感谢，帮了我很多，现在只是我风格化了我的方式，谢谢