Template:Tooltip Hover: Difference between revisions

Help

← Older edit Newer edit →

VisualWikitext

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

Revision as of 04:37, 25 September 2023