Template:Tooltip Hover: Difference between revisions

Help

Revision as of 22:37, 24 September 2023

This is a Tooltip Example

Not a Tooltip
Not a tooltip either

@@ Line 1: / Line 1: @@
-<div class="testBlue">
+{{#css:
-<templatestyles src="RoomCoE/style.css" />
-This is a test. This is only a test.
+.hover-title {
+    display: inline;
+    pointer-events: auto;
+    cursor: pointer;
+    color: yellow;
+}
+.hover-image {
+    visibility: hidden;
+}
+body:not(.mobile) .hover-title:hover + .hover-image {
+    visibility: visible;
+    pointer-events: none;
+}
+.hover-image {
+    display: flex;
+    position: absolute;
+    top: 0px;
+    left: 50px;
+    pointer-events: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 250px;
+    height: 250px;
+}
+.hover-image img {
+    max-width: 100% !important;
+    max-height: 100% !important;
+    width: auto !important;
+    height: auto !important;
+    margin-bottom: 0;
+}
+}}
+<div class="hover-title">This is a Tooltip Example</div>
+<div class="hover-image">
+[[Image:SF CoE Death School.png |250px]]
 </div>
+<div>Not a Tooltip<br>Not a tooltip either</div>