共计 622 个字符,预计需要花费 2 分钟才能阅读完成。
任何表圈都能够增加一个 title 属性,当鼠标 hover 下来的时候将 title 的 value 展现进去。
然而理论场景中 title 的款式比较简单以及呈现的工夫是要等 hover 下来一段时间后再显示进去。
优化项:
1:title 的款式
2:鼠标 hover 即展现 title 内容
3:全局批改
PS:我晓得当初很多 UI 框架有 tooltip。然而有时候只是一个简略的属性展现且应用范畴较广,没有必要应用 UI 组件。
批改形式:
1:title 属性改为 data-title(或者任意你认为适合的名字,留神 css 中类型选择器和 after 的 content 的 attr 名称同步批改即可。这样能够防止原始 title 的反复呈现
2:本例次要修了批改 title 的即时性问题,所以款式没有做太多批改,你能够按需批改在:after 中
[data-title] {
&:hover {
position: relative;
&:after {content: attr(data-title);
position: absolute;
top: 20px;
left: 10px;
color: #666;
font-size: 10px;
border: 1px solid #ddd;
background-color: #fff;
z-index: 20;
line-height: 1.5;
font-style: normal;// 本例中 data-title 为 i 标签属性
white-space: nowrap;
padding: 0 5px;
}
}
}
批改款式:
正文完