User:Felyza/Sandbox/TooltipTest: Difference between revisions

(13 intermediate revisions by the same user not shown)

Line 1:

~~<style>~~

{{#css:

/* Tooltip container */

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted ~~black~~; /* If you want dots under the hoverable text */

border-bottom: 1px dotted orange; /* If you want dots under the hoverable text */

}

Line 16:

padding: 5px 0;

border-radius: 6px;

border:1px solid rgba(255,255,255,.25);

~~/* Position the tooltip text - see examples below! */~~

position: absolute;

z-index: 1;

}

.tooltip .tooltiptext {

width: 512px;

top: 100%;

left: 75%;

margin-left: -128px; /* Use half of the width (120/2 = 60), to center the tooltip */

}

/* Show the tooltip text when you mouse over the tooltip container */

Line 26:

Line 33:

visibility: visible;

}

~~</style>~~

}}

<~~div~~ class="tooltip">~~Hover over me~~

Amarr Empire{{icon|amarr|64}}Amarr Empire The largest of the five main empires, the Amarr Empire is a sprawling patch-work of feudal-like provinces held together by the might of the emperor. Religion has always played a big part in Amarrian politics and the Amarrians believe they are the rightful masters of the world, souring their relations with their neighbours. Another source of ill-feelings on part of the other empires is the fact that the Amarrians embrace slavery. Headquarters: [http://evemaps.dotlan.net/system/Amarr Amarr] Settled Systems: 484 Stations: 998 Illegal Goods: Khumaak, Plutonium, Small Arms Main Trade Hub: [http://evemaps.dotlan.net/station/Amarr_VIII_(Oris)_-_Emperor_Family_Academy Amarr VIII (Oris) - Emperor Family Academy]

~~Tooltip~~ text

</~~div~~>

@@ Line 1: / Line 1: @@
-<style>
+{{#css:
 /* Tooltip container */
 .tooltip {
    position: relative;
    display: inline-block;
-   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+   border-bottom: 1px dotted orange; /* If you want dots under the hoverable text */
 }
@@ Line 16: / Line 16: @@
    padding: 5px 0;
    border-radius: 6px;
+   border:1px solid rgba(255,255,255,.25);
-   /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
 }
+.tooltip .tooltiptext {
+  width: 512px;
+  top: 100%;
+  left: 75%;
+  margin-left: -128px; /* Use half of the width (120/2 = 60), to center the tooltip */
+}
 /* Show the tooltip text when you mouse over the tooltip container */
@@ Line 26: / Line 33: @@
    visibility: visible;
 }
-</style>
+}}
-<div class="tooltip">Hover over me
+<span class="tooltip">Amarr Empire<span class="tooltiptext">{{icon|amarr|64}}Amarr Empire<br><br><span style="text-align:left;float:left;padding-left:20px;">The largest of the five main empires, the Amarr Empire is a sprawling patch-work of feudal-like provinces held together by the might of the emperor. Religion has always played a big part in Amarrian politics and the Amarrians believe they are the rightful masters of the world, souring their relations with their neighbours. Another source of ill-feelings on part of the other empires is the fact that the Amarrians embrace slavery.<br><br>Headquarters: [http://evemaps.dotlan.net/system/Amarr Amarr]<br>Settled Systems: 484<br>Stations: 998<br>Illegal Goods: Khumaak, Plutonium, Small Arms<br><br>Main Trade Hub: [http://evemaps.dotlan.net/station/Amarr_VIII_(Oris)_-_Emperor_Family_Academy Amarr VIII (Oris) - Emperor Family Academy]
-  <span class="tooltiptext">Tooltip text</span>
+</span></span></span>
-</div>