|
|
| Line 1: |
Line 1: |
| {{#css:
| |
|
| |
|
| .tooltip { outline:none; position: relative }
| |
| .tooltip:hover span { display: inline-block; }
| |
|
| |
| .tooltip span {
| |
| z-index: 10;
| |
| position: absolute;
| |
| display: none;
| |
| padding: 8px;
| |
| width: 300px;
| |
| line-height: 1em;
| |
| color: black;
| |
| background: #aaaaaa;
| |
| border: 1px solid #222222;
| |
| border-radius: 8px;
| |
| text-decoration: none;
| |
| box-shadow: 2px 2px 4px #000000;
| |
| white-spacing:
| |
| }
| |
|
| |
| .tooltip.right span { left: 100%; margin-left: 1em; margin-top: -.5em; }
| |
| .tooltip.left span { right: 100%; margin-right: 1em; margin-top: -.5em; }
| |
| .tooltip.up span { bottom: 0; margin-bottom: 1.5em; }
| |
| .tooltip.down span { top: 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 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>
| |
