修改DOM标签的title属性样式

任何表圈都可以添加一个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;
            }
        }
    }

修改样式：