lu2/theme/pure/css/common/ui/Tips.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @Tips.css
 * @author xinxuzhang
 * @create 15-06-25
 *
**/
.ui-tips[data-title] {
    text-indent: 0;
    position: relative;
    overflow: visible;
}

.ui-tips[data-title]::before,
.ui-tips[data-title]::after {
    position: absolute;
    left: 50%;
    -ms-pointer-events: none;
    pointer-events: none;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
}

.ui-tips[data-title]::before {
    content: attr(data-title);
    bottom: calc(100% + 12px);
    max-width: 250px;
    padding: 6px 10px;
    line-height: 18px;
    border-radius: 3px;
    background-color: #373c42;
    text-align: left;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
}

.ui-tips[data-title]::after {
    content: '';
    border: 6px solid transparent;
    border-top-color: #373c42;
    bottom: 100%;
}

.ui-tips[data-title]:hover::before,
.ui-tips[data-title]:hover::after,
.ui-tips[data-title]:focus::before,
.ui-tips[data-title]:focus::after {
    transition: visibility .1s .1s;
    visibility: visible;
}

.ui-tips[data-title]:hover {
    outline: none;
}

/* 朝下的情况 */
.reverse.ui-tips[data-title]::before,
[reverse].ui-tips[data-title]::before {
    bottom: auto;
    top: calc(100% + 12px);
}

.reverse.ui-tips[data-title]::after,
[reverse].ui-tips[data-title]::after {
    border-color: transparent transparent #373c42;
    bottom: auto;
    top: 100%;
}


/* JS生成的，和CSS定位样式不合并，保持独立 */
.ui-tips-x {
    text-align: center;
    position: absolute;
    z-index: 99;
}
.ui-tips-content {
    display: block;
    max-width: 20em;
    padding: 6px 10px;
    line-height: 18px;
    border-radius: 3px;
    background-color: #373c42;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    text-align: left;
}
.ui-tips-arrow {
    position: absolute;
    top: 100%;
    left: calc(50% - 6px);
    border: 6px solid transparent;
    border-top-color: #373c42;
}
@media (any-hover: none) {
    html {
        --hoverNone: 'true';
    }
}

/* 左右箭头方向展示的tips效果 */
.ui-tips-x[data-direction="top"] {
    margin-top: -12px;
}
.ui-tips-x[data-direction="left"] {
    margin-left: -12px;
}
.ui-tips-x[data-direction="right"] {
    margin-left: 12px;
}
.ui-tips-x[data-direction="bottom"] {
    margin-top: 12px;
}

[data-direction="bottom"] .ui-tips-arrow {
    top: -12px;
    border-color: transparent transparent #373c42;
}
[data-direction="left"] .ui-tips-arrow,
[data-direction="right"] .ui-tips-arrow {
    top: calc(50% - 6px);
}
[data-direction="left"] .ui-tips-arrow {
    left: 100%;
    border-color: transparent transparent transparent #373c42;
}
[data-direction="right"] .ui-tips-arrow {
    left: -12px;
    border-color: transparent #373c42 transparent transparent;
}

[data-align="8-6"] .ui-tips-content,
[data-align="6-8"] .ui-tips-content {
    max-width: 600px;
}
[data-align="2-3"] .ui-tips-content,
[data-align="3-2"] .ui-tips-content {
    position: relative;
    left: 10px;
}
[data-align="1-4"] .ui-tips-content,
[data-align="4-1"] .ui-tips-content {
    position: relative;
    left: -10px;
}

/* 错误提示的tips效果 */
.ui-tips-error:not(.none) {
    animation: fadeIn .2s, fallDown .2s;
}

.ui-tips-error .ui-tips-content {
    background-color: #eb4646;
}

.ui-tips-error .ui-tips-arrow {
    border-top-color: #eb4646;
}