Difference between revisions of "User:Cassiel Seraphim/Sandbox8"
(Blanked the page) |
|||
| Line 1: | Line 1: | ||
| + | {{#css: | ||
| + | .tooltip { outline:none; position: relative } | ||
| + | .tooltip:hover span { display: block; } | ||
| + | |||
| + | .tooltip span { | ||
| + | z-index: 10; | ||
| + | position: absolute; | ||
| + | display: none; | ||
| + | padding: 8px; | ||
| + | width: 300px; | ||
| + | line-height: 1em; | ||
| + | color: black; | ||
| + | background: lightgrey; | ||
| + | border: 1px solid #222222; | ||
| + | border-radius: 8px; | ||
| + | text-decoration: none; | ||
| + | box-shadow: 2px 2px 4px #000000; | ||
| + | } | ||
| + | |||
| + | .tooltip span img { | ||
| + | position: absolute; | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | 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; } | ||
| + | |||
| + | }} | ||
| + | |||
| + | '''Normal''' tooptip: {{tooltip|Example|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.}} | ||
| + | |||
| + | |||
| + | 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> | ||
Revision as of 16:42, 16 September 2014
Normal tooptip: ExampleLorem 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.
Let's see what the tooltip upLorem 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. does compared to tooltip rightLorem 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. as well as how tooltip leftLorem 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. differ from tooltip downLorem 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. when put in the end. Does this normal tooltipLorem 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. change?
Now how about an image like this? 
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. or a larger one like 
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.
