|
|
| Line 1: |
Line 1: |
| {{TooltipHover}} | | {{TooltipHover}} |
| | |
| {{#css: | | {{#css: |
| .PostUrl_tooltip { | | |
| position: relative; | | .item-title { |
| -webkit-transition: all 0.3s ease-in-out 0s; | | color: #cb9; |
| transition: all 0.3s ease-in-out 0s; | | font-weight: bold; |
| display: inline-block;
| | font-size: 150%; |
| color: #ff0;
| |
| } | | } |
| .PostUrl_tooltip:hover { | | |
| color: #0c96ff!important; | | .item-subtitle { |
| cursor: pointer; | | color: #666; |
| | font-weight: bold; |
| } | | } |
| .PostUrl_tooltip a{
| | |
| position: absolute;
| | .item-text { |
| display: block;
| | color: #cb9; |
| visibility: hidden;
| |
| opacity: 0;
| |
| transition: all .3s;
| |
| border-radius: 5px;
| |
| box-shadow: 0 0 20px #444 inset;
| |
| padding: 3px 5px 3px 5px;
| |
| top: -250px;
| |
| left: -5px;
| |
| z-index: 9999999;
| |
| border: 1px solid #514d4d;
| |
| }
| |
| .PostUrl_tooltip a img {
| |
| display: block;
| |
| border: 1px solid #444;
| |
| max-width: 360px;
| |
| height: auto;
| |
| }
| |
| .PostUrl_tooltip a:after {
| |
| content: " ";
| |
| border-style: solid;
| |
| border-width: 7px 7px 0px 7px;
| |
| border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;
| |
| transition-duration: 0s;
| |
| transform-origin: top;
| |
| transform: translateX(-50%) scaleY(1);
| |
| position: absolute;
| |
| left: 5%;
| |
| bottom: -7px;
| |
| }
| |
| .PostUrl_tooltip:hover a{
| |
| visibility: visible;
| |
| opacity: 1;
| |
| }
| |
| .PostUrl_tooltip b:before { | |
| content: "";
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 2px;
| |
| bottom: 0;
| |
| left: 0;
| |
| background-color: #333;
| |
| visibility: hidden;
| |
| -webkit-transform: scaleX(0);
| |
| transform: scaleX(0);
| |
| -webkit-transition: all 0.3s ease-in-out 0s;
| |
| transition: all 0.3s ease-in-out 0s;
| |
| }
| |
| .PostUrl_tooltip b:hover:before {
| |
| visibility: visible; | |
| background-color: #0c96ff!important;
| |
| -webkit-transform: scaleX(1);
| |
| transform: scaleX(1);
| |
| } | | } |
| | |
| }} | | }} |
|
| |
|
| == Testing Tooltips== | | == Testing Tooltips== |
| This isn't really Landmarks I'm trying to test tooltips. And then... I need some space up here for testing. So, here's useless text. I should do the Lorem Ipsum or whatever that Latin phrase is. | | This isn't really Landmarks I'm trying to test tooltips. |
| Whatever.
| |
|
| |
|
| {| class="wikitable" style="min-width: 75%;max-width: 95%"
| | <div class="item-title">Battle Robe</div> |
| !Expansion
| | <div class="item-subtitle">Artifact, Ingredient, Light Armor</div> |
| !Effect(s)
| | <div class=" item- text> +2 Speed<br> Grants <div class="PostUrl_tooltip"><b> Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png |350px]]</span></b></div> </div> |
| !Cost
| |
| |-
| |
| |Comfy Chair
| |
| | +3 Research per day
| |
| | (Arcane x1)
| |
| |-
| |
| | <div class=" tooltip- text"> Tome of Summoning</div> <div class=" tooltip- image"> [[Image:SF CoE Extension Tome of Summoning.png|350px]]</div> | |
| |All Fantastic or Summon units gain Soul Cage.<br>All Fantastic or Summon units gain Bloodbound.
| |
| | (Death x1) (Arcane x3)
| |
| |-
| |
| |<div class="PostUrl_tooltip"><b> Over Here!<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Extension Tome of Summoning.png]]</span></b></div> | |
| |}
| |
Testing Tooltips
This isn't really Landmarks I'm trying to test tooltips.
Battle Robe
Artifact, Ingredient, Light Armor
+2 Speed
Grants
Quick Reflexes
