No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
{{#css: | {{#css: | ||
.tooltip { | .tooltip-short, .tooltip, .tooltip-long { | ||
position: relative; | position: relative; | ||
-webkit-transition: all 0.3s ease-in-out 0s; | -webkit-transition: all 0.3s ease-in-out 0s; | ||
transition: all 0.3s ease-in-out 0s; | transition: all 0.3s ease-in-out 0s; | ||
display: inline-block; | display: inline-block; | ||
color: # | color: #07f; | ||
} | } | ||
.tooltip:hover { | .tooltip-short:hover, .tooltip:hover, .tooltip-long:hover { | ||
color: #fff!important; | color: #fff!important; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.tooltip a{ | .tooltip-short a { | ||
position: absolute; | |||
display: block; | |||
visibility: hidden; | |||
opacity: 0; | |||
transition: all .3s; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 3px 5px 3px 5px; | |||
top: -150px; | |||
left: -5px; | |||
z-index: 9999999; | |||
border: 1px solid #514d4d; | |||
} | |||
.tooltip a { | |||
position: absolute; | position: absolute; | ||
display: block; | display: block; | ||
Line 26: | Line 40: | ||
border: 1px solid #514d4d; | border: 1px solid #514d4d; | ||
} | } | ||
.tooltip a img { | .tooltip-long a{ | ||
position: absolute; | |||
display: block; | |||
visibility: hidden; | |||
opacity: 0; | |||
transition: all .3s; | |||
border-radius: 5px; | |||
box-shadow: 0 0 20px #444 inset; | |||
padding: 3px 5px 3px 5px; | |||
top: -500px; | |||
left: -5px; | |||
z-index: 9999999; | |||
border: 1px solid #514d4d; | |||
} | |||
.tooltip-short a img, .tooltip a img, .tooltip-long a img { | |||
display: block; | display: block; | ||
border: 1px solid #444; | border: 1px solid #444; | ||
Line 32: | Line 60: | ||
height: auto; | height: auto; | ||
} | } | ||
.tooltip a:after { | .tooltip-short a:after, .tooltip a:after, .tooltip-long a:after { | ||
content: " "; | content: " "; | ||
border-style: solid; | border-style: solid; | ||
Line 44: | Line 72: | ||
bottom: -7px; | bottom: -7px; | ||
} | } | ||
.tooltip:hover a{ | .tooltip-short:hover a, .tooltip:hover a, .tooltip-long:hover a{ | ||
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
.tooltip b:before { | .tooltip b:before, .tooltip b:before, .tooltip-long b:before { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
Line 62: | Line 90: | ||
transition: all 0.3s ease-in-out 0s; | transition: all 0.3s ease-in-out 0s; | ||
} | } | ||
.tooltip b:hover:before { | .tooltip-short b:hover:before, .tooltip b:hover:before, .tooltip-long b:hover:before { | ||
visibility: visible; | visibility: visible; | ||
background-color: #0c96ff!important; | background-color: #0c96ff!important; |