layui使用tips_Layui使用jquery.tooltip.js实现悬停提示

.tooltip {

position: absolute;

z-index: 1070;

display: block;

font-size: 12px;

line-height: 1.4;

visibility: visible;

filter: alpha(opacity=0);

opacity: 0

}

.tooltip.in {

filter: alpha(opacity=90);

opacity: .9

}

.tooltip.top {

padding: 5px 0;

margin-top: -3px

}

.tooltip.right {

padding: 0 5px;

margin-left: 3px

}

.tooltip.bottom {

padding: 5px 0;

margin-top: 3px

}

.tooltip.left {

padding: 0 5px;

margin-left: -3px

}

.tooltip-inner {

max-width: 200px;

padding: 3px 8px;

color: #fff;

text-align: center;

text-decoration: none;

background-color: #000;

border-radius: 4px

}

.tooltip-arrow {

position: absolute;

width: 0;

height: 0;

border-color: transparent;

border-style: solid

}

.tooltip.top .tooltip-arrow {

bottom: 0;

left: 50%;

margin-left: -5px;

border-width: 5px 5px 0;

border-top-color: #000

}

.tooltip.top-left .tooltip-arrow {

bottom: 0;

left: 5px;

border-width: 5px 5px 0;

border-top-color: #000

}

.tooltip.top-right .tooltip-arrow {

right: 5px;

bottom: 0;

border-width: 5px 5px 0;

border-top-color: #000

}

.tooltip.right .tooltip-arrow {

top: 50%;

left: 0;

margin-top: -5px;

border-width: 5px 5px 5px 0;

border-right-color: #000

}

.tooltip.left .tooltip-arrow {

top: 50%;

right: 0;

margin-top: -5px;

border-width: 5px 0 5px 5px;

border-left-color: #000

}

.tooltip.bottom .tooltip-arrow {

top: 0;

left: 50%;

margin-left: -5px;

border-width: 0 5px 5px;

border-bottom-color: #000

}

.tooltip.bottom-left .tooltip-arrow {

top: 0;

left: 5px;

border-width: 0 5px 5px;

border-bottom-color: #000

}

.tooltip.bottom-right .tooltip-arrow {

top: 0;

right: 5px;

border-width: 0 5px 5px;

border-bottom-color: #000

}