/*：非源码,不可编辑。源代码唯一下载地址: http://www.bootstrapmb.com/item/10830。（此备注只出现在演示站，下载的源码不包含。）*/:root {
    --ttbgcolor: #333333;
    --ttcolor: #ffffff;
}

[tooltip-lbl][tooltip-pos] {
    position: relative;
}

[tooltip-lbl][tooltip-pos]:before {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    opacity: 0;
    transition: .1s all;
    transition: all .18s ease-out .18s;
    border: 5px solid transparent;
    z-index: 10;
}

[tooltip-lbl][tooltip-pos]:after {
    content: attr(tooltip-lbl);
    position: absolute;
    padding: 10px;
    color: var(--ttcolor);
    opacity: 0;
    transition: .1s all;
    white-space: nowrap;
    transition: all .18s ease-out .18s;
    z-index: 10;
    pointer-events: none;
    border-radius: 4px;
    background-color: var(--ttbgcolor);
    font-size:14px;
}


[tooltip-lbl][tooltip-pos]:hover:before,
[tooltip-lbl][tooltip-pos]:hover:after {
    opacity: 1;
    pointer-events: none;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='top']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:hover:after {
    transform: translate(-50%, 0);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:before {
    bottom: 100%;
    transform-origin: top;
    transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:after {
    margin-bottom: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:before {
    border-top-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='top']:after {
    left: 50%;
    transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:before {
    border: 5px solid transparent;
    border-top-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:after {
    margin-bottom: 10px;
}



/*--Bottom--*/
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:before {
    top: 100%;
    transform-origin: bottom;
    transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:after {
    margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:before {
    border-bottom-color: var(--ttbgcolor);
}


[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:after {
    left: 50%;
    top: 100%;
    transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:before {
    border: 5px solid transparent;
    border-bottom-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:after {
    margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='left']:after {
    top: 50%;
    right: 100%;
    transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:before {
    border: 5px solid transparent;
    border-left-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:after {
    margin-right: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='left']:hover:after {
    right: 100%;
    top: 50%;
    transform: translate(4px, -50%);
    transform-origin: bottom;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='right']:after {
    top: 50%;
    left: 100%;
    transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:before {
    border: 5px solid transparent;
    border-right-color: var(--ttbgcolor);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:after {
    margin-left: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='right']:hover:after {
    left: 100%;
    top: 50%;
    transform: translate(4px, -50%);
    transform-origin: bottom;
}






/*-- Right --*/

[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:after {
    right: 0;
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:before {
    right: 5px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:hover:before {
    transform: translate(0, 0);
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:after {
    left: 0;
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:before {
    left: 5px;
}

[tooltip-lbl][tooltip-size='sm']:after {
    white-space: normal;
    width: 90px;
}

[tooltip-lbl][tooltip-size='md']:after {
    white-space: normal;
    width: 150px;
}

[tooltip-lbl][tooltip-size='lg']:after {
    white-space: normal;
    width: 260px;
}

[tooltip-lbl][tooltip-size='xlg']:after {
    white-space: normal;
    width: 380px;
}

[tooltip-lbl][tooltip-size='fit']:after {
    white-space: normal;
    width: 100%;
}/*：非源码,不可编辑。源代码唯一下载地址: http://www.bootstrapmb.com/item/10830。（此备注只出现在演示站，下载的源码不包含。）*/