Difference between revisions of "User:Noemie belacqua/Sandbox6"
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | = | + | == Method 1: MediaWiki calls database == |
| + | {{#css: | ||
| − | + | .tooltip-trigger { | |
| − | * | + | /* outline:none; |
| − | + | position: relative; | |
| − | * | + | top: 0; |
| − | + | margin-top: 1.5em; */ | |
| + | border-bottom: 1px dotted #cccccc; } | ||
| − | + | .tooltip-trigger:hover .tooltip { | |
| − | * | + | display: inline-block; } |
| − | + | ||
| − | + | .tooltip { | |
| − | + | margin-top: 1.5em; | |
| − | + | margin-right: 1em; | |
| − | + | margin-left: -2em; | |
| − | == | + | z-index: 10; |
| − | + | position: absolute; | |
| − | + | display: none; | |
| − | == | + | padding: 0.6em; |
| − | + | /* width: 300px ; */ | |
| + | color: #ffffff; | ||
| + | background: #000000; | ||
| + | border: 1px solid #aaaaaa; | ||
| + | border-radius: 8px; | ||
| + | text-decoration: none; | ||
| + | /* box-shadow: 2px 2px 4px #000000; */ | ||
| + | font-size: 90%; | ||
| + | } | ||
| + | |||
| + | }} | ||
| + | :''(credit for the beautiful tooltips: [[User:Cassiel_seraphim/Sandbox8|Cassiel Seraphim]])'' | ||
| + | |||
| + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut interdum est, porta porta velit. Ut interdum id lacus vitae semper. Mauris vel diam semper, pretium leo quis, vestibulum arcu. Vestibulum eleifend justo ac enim lobortis cursus. Donec in suscipit risus, eget commodo risus. Nunc ut ante justo. Quisque a condimentum urna. Etiam tristique urna mauris, a dapibus dui semper eget. | ||
| + | |||
| + | Let's see what the <span class="tooltip-trigger">tooltip<span class="tooltip">Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,</span></span> does to this site. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut interdum est, porta porta velit. Ut interdum id lacus vitae semper. Mauris vel diam semper, pretium leo quis, vestibulum arcu. Vestibulum eleifend justo ac enim lobortis cursus. Donec in suscipit risus, eget commodo risus. Nunc ut ante justo. Quisque a condimentum urna. Etiam tristique urna mauris, a dapibus dui semper eget. | ||
| + | |||
| + | And now for an <span class="tooltip-trigger">item<span class="tooltip"><div>{{icon|web|}} '''Stasis Webifier I'''</div><div>{{icon|powergrid|24}} 1 MW {{icon|cpu|24}} 25 tf</div><div>-50% speed @ 10 km</div></span></span> tooltip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut interdum est, porta porta velit. Ut interdum id lacus vitae semper. Mauris vel diam semper, pretium leo quis, vestibulum arcu. Vestibulum eleifend justo ac enim lobortis cursus. Donec in suscipit risus, eget commodo risus. Nunc ut ante justo. Quisque a condimentum urna. Etiam tristique urna mauris, a dapibus dui semper eget. | ||
| + | |||
| + | == Method 2: External tool generates wiki-code == | ||
Latest revision as of 14:09, 26 September 2014
Method 1: MediaWiki calls database
- (credit for the beautiful tooltips: Cassiel Seraphim)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut interdum est, porta porta velit. Ut interdum id lacus vitae semper. Mauris vel diam semper, pretium leo quis, vestibulum arcu. Vestibulum eleifend justo ac enim lobortis cursus. Donec in suscipit risus, eget commodo risus. Nunc ut ante justo. Quisque a condimentum urna. Etiam tristique urna mauris, a dapibus dui semper eget.
Let's see what the tooltipLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, does to this site. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut interdum est, porta porta velit. Ut interdum id lacus vitae semper. Mauris vel diam semper, pretium leo quis, vestibulum arcu. Vestibulum eleifend justo ac enim lobortis cursus. Donec in suscipit risus, eget commodo risus. Nunc ut ante justo. Quisque a condimentum urna. Etiam tristique urna mauris, a dapibus dui semper eget.
And now for an
item
Stasis Webifier I
1 MW 
25 tftooltip. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut interdum est, porta porta velit. Ut interdum id lacus vitae semper. Mauris vel diam semper, pretium leo quis, vestibulum arcu. Vestibulum eleifend justo ac enim lobortis cursus. Donec in suscipit risus, eget commodo risus. Nunc ut ante justo. Quisque a condimentum urna. Etiam tristique urna mauris, a dapibus dui semper eget.
