Template:Tooltip Hover: Difference between revisions

Help

← Older edit Newer edit →

VisualWikitext

@@ Line 1: / Line 1: @@
 {{#css:
-.tooltip-text {
+.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: #ff0;
 }
-.tooltip-image {
+.tooltip:hover {
-    visibility: hidden;
+  color: #0c96ff!important;
-    height: 0px;
+  cursor: pointer;
 }
-body:not(.mobile) .tooltip-text:hover + .tooltip-image {
+.tooltip a{
-    visibility: visible;
+  position: absolute;
-    pointer-events: none;
+  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: -250px;
+  left: -5px;
+  z-index: 9999999;
+  border: 1px solid #514d4d;
 }
-.tooltip-image {
+.tooltip a img {
-    display: flex;
+  display: block;
-    position: relative;
+  border: 1px solid #444;
-    top: -120px;
+  max-width: 360px;
-    left: 0px;
+  height: auto;
-    pointer-events: none;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
 }
-.tooltip-image img {
+.tooltip a:after {
-    max-width: 100% !important;
+	content: " ";
-     max-height: 100% !important;
+	border-style: solid;
-     width: auto !important;
+	border-width: 7px 7px 0px 7px;
-    height: auto !important;
+	border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;
-    margin-bottom: 0;
+	transition-duration: 0s;
+	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);
 }
 }}

Revision as of 03:42, 25 September 2023