More actions
Blanked the page |
No edit summary |
||
| 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> | |||