|
|
| Line 1: |
Line 1: |
| {{#css: | | {{#css: |
|
| |
|
| .tooltip { | | .tooltip-text { |
| position: relative;
| | display: inline; |
| -webkit-transition: all 0.3s ease-in-out 0s;
| | pointer-events: auto; |
| transition: all 0.3s ease-in-out 0s;
| | cursor: pointer; |
| display: inline-block;
| | color: yellow; |
| color: #ff0;
| |
| } | | } |
|
| |
|
| .tooltip:hover { | | .tooltip-image { |
| color: #0c96ff!important;
| | visibility: hidden; |
| cursor: pointer;
| | height: 0px; |
| } | | } |
|
| |
|
| .tooltip a{ | | body:not(.mobile) .tooltip-text:hover + .tooltip-image { |
| position: absolute;
| | visibility: visible; |
| display: block;
| | pointer-events: none; |
| visibility: hidden;
| |
| opacity: 0;
| |
| transition: all .3s;
| |
| border-radius: 5px;
| |
| box-shadow: 0 0 20px #444 inset;
| |
| padding: 3px 5px 3px 5px;
| |
| top: -250px;
| |
| left: -5px;
| |
| z-index: 9999999;
| |
| border: 1px solid #514d4d;
| |
| } | | } |
|
| |
|
| .tooltip a img { | | .tooltip-image { |
| display: block;
| | display: flex; |
| border: 1px solid #444;
| | position: relative; |
| max-width: 360px;
| | top: -120px; |
| height: auto;
| | left: 0px; |
| | pointer-events: none; |
| | flex-direction: column; |
| | align-items: center; |
| | justify-content: center; |
| } | | } |
|
| |
|
| .tooltip a:after { | | .tooltip-image img { |
| content: " ";
| | max-width: 100% !important; |
| border-style: solid;
| | max-height: 100% !important; |
| border-width: 7px 7px 0px 7px;
| | width: auto !important; |
| border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;
| | height: auto !important; |
| transition-duration: 0s;
| | margin-bottom: 0; |
| transform-origin: top;
| |
| transform: translateX(-50%) scaleY(1);
| |
| position: absolute;
| |
| left: 5%;
| |
| bottom: -7px;
| |
| }
| |
| | |
| .tooltip:hover a{
| |
| visibility: visible; | |
| opacity: 1; | |
| }
| |
| | |
| .tooltip b:before {
| |
| content: "";
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 2px;
| |
| bottom: 0;
| |
| left: 0;
| |
| background-color: #333;
| |
| visibility: hidden;
| |
| -webkit-transform: scaleX(0);
| |
| transform: scaleX(0);
| |
| -webkit-transition: all 0.3s ease-in-out 0s;
| |
| transition: all 0.3s ease-in-out 0s;
| |
| }
| |
| | |
| .tooltip b:hover:before {
| |
| visibility: visible;
| |
| background-color: #0c96ff!important;
| |
| -webkit-transform: scaleX(1);
| |
| transform: scaleX(1);
| |
| } | | } |
|
| |
|
| }} | | }} |
