|
|
| 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>
| |
