User:Cassiel Seraphim/Sandbox8: Difference between revisions

← Older edit Newer edit →

VisualWikitext

@@ Line 2: / Line 2: @@
 .tooltip { outline:none; position: relative }
-.tooltip:hover span { display: block; }
+.tooltip:hover span { display: inline-block; }
 .tooltip span {
@@ Line 12: / Line 12: @@
    line-height: 1em;
    color: black;
-   background: lightgrey;
+   background: #aaaaaa;
    border: 1px solid #222222;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 2px 2px 4px #000000;
+  white-spacing:
 }
-.tooltip span img {
+.tooltip.right span { left: 100%; margin-left: 1em; margin-top: -.5em; }
-  position: absolute;
+.tooltip.left  span { right: 100%; margin-right: 1em; margin-top: -.5em; }
-  width: 0;
+.tooltip.up    span { bottom: 0; margin-bottom: 1.5em; }
-  height: 0;
+.tooltip.down  span { top: 0; margin-top: 1.5em; }
-  border: 1px solid transparent;
-}
-.tooltip.right span { top: 0; left: 100%; margin-left: 1em; margin-top: -.5em; }
-.tooltip.left  span { top: 0; right: 100%; margin-right: 1em; margin-top: -.5em; }
-.tooltip.up    span { bottom: 0; left: 0; right: 0; margin-bottom: 1.5em; }
-.tooltip.down  span { top: 0; left: 0; right: 0; margin-top: 1.5em; }
 }}
@@ Line 38: / Line 32: @@
 Let's see what the <font color="wheat"><span class="tooltip up">tooltip up<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span></font> does compared to <font color="lime"><span class="tooltip right">tooltip right<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span></font> as well as how <font color="crimson"><span class="tooltip left">tooltip left<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span></font> differ from <font color="magenta"><span class="tooltip down">tooltip down<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span></font> when put in the end. Does this <font color="cyan"><span class="tooltip">normal tooltip<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span></font> change?
-Now how about an image like this? <span class="tooltip up">{{icon|web|32}}<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span> or a larger one like <span class="tooltip down">{{icon|amarr|64}}<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span>
+Now how about an image like this? <span class="tooltip up">{{icon|web|32}}<span style="font-size:90%">{{icon|web|20}} -60% speed reduction at 30 km.</span></span> or a larger one like <span class="tooltip down">{{icon|amarr|64}}<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.</span></span>