css 编写提示框

# 提示框

示例

移到这里

# 文字链接

<a class="tooltip" data-title="提示文字">提示</a>

# 样式

.tooltip:hover {
    position: relative;
    /*提示内容*/
    &:before {
        content: attr(data-title);
        position: absolute;
        background: #444;
        white-space: nowrap;
        right: 70px;
        color: #fff;
        font-size: 0.8rem;
        padding: 0 5px;
        border-radius: 5px;
        top: 1px;
    }
    /*箭头*/
    &:after {
        content: ' ';
        position: absolute;
        right: 63px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 8px solid #444;
        top: 30%;
    }
}