CosmicSky

Tabletest: Difference between revisions

Newer edit →
Created page with "→‎Tooltip table styling: .tooltip-table { border-collapse: collapse; width: auto; →‎Adjust width to fit content if needed: } .tooltip-table td { position: relative; text-align: center; →‎Center content horizontally: vertical-align: middle; →‎Center content vertically: padding: 0; →‎Remove padding around cells: border: 1px solid black; →‎Optional: keeps table borders visible: } →‎Tooltip styling: .tooltip-cell .tooltip-text { visibil..."
 
No edit summary
Line 1: Line 1:
/* Tooltip table styling */
{| class="tooltip-table" style="border-collapse: collapse; width: 30%;"
.tooltip-table {
|-
  border-collapse: collapse;
| style="text-align: center; width: 16%; border: 1px solid black; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">'''<span style="color:#FFFF55; font-size: 1.75em;">Dwarf Forged Helmet</span> <span style="color:white; font-size: 1.75em;">(</span><span style="color:#FFFF55; font-size: 1.75em;">Diamond</span><span style="color:white; font-size: 1.75em;">)</span>'''<br>
  width: auto; /* Adjust width to fit content if needed */
<span style="color:#AAAAAA;">Contains a Realm Armorset piece with Randomized Attributes</span><br><br>
}
'''<span style="color:white;">Random Loot </span><span style="color:#AAAAAA;">(1 item)</span>'''<br>
 
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br>
.tooltip-table td {
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br><br>
  position: relative;
'''<span style="color:#FFAA00;">Cost</span>'''<br>
  text-align: center; /* Center content horizontally */
* '''<span style="color:white;">3,990 Dwarf Mine Realm Points</span>'''<br><br>
  vertical-align: middle; /* Center content vertically */
<span style="color:#AAAAAA;">Click to purchase item!</span>
  padding: 0; /* Remove padding around cells */
</span>|div|class="tooltip-cell"}}
  border: 1px solid black; /* Optional: keeps table borders visible */
| style="text-align: center; width: 16%; border: 1px solid black; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">'''<span style="color:#FFFF55; font-size: 1.75em;">Dwarf Forged Helmet</span> <span style="color:white; font-size: 1.75em;">(</span><span style="color:#FFFF55; font-size: 1.75em;">Diamond</span><span style="color:white; font-size: 1.75em;">)</span>'''<br>
}
<span style="color:#AAAAAA;">Contains a Realm Armorset piece with Randomized Attributes</span><br><br>
 
'''<span style="color:white;">Random Loot </span><span style="color:#AAAAAA;">(1 item)</span>'''<br>
/* Tooltip styling */
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br>
.tooltip-cell .tooltip-text {
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br><br>
  visibility: hidden;
'''<span style="color:#FFAA00;">Cost</span>'''<br>
  width: 350px; /* Increase width for more space */
* '''<span style="color:white;">3,990 Dwarf Mine Realm Points</span>'''<br><br>
  background-color: #333;
<span style="color:#AAAAAA;">Click to purchase item!</span>
  color: #fff;
</span>|div|class="tooltip-cell"}}
  text-align: left; /* Align text to the left */
| style="text-align: center; width: 16%; border: 1px solid black; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">'''<span style="color:#FFFF55; font-size: 1.75em;">Dwarf Forged Helmet</span> <span style="color:white; font-size: 1.75em;">(</span><span style="color:#FFFF55; font-size: 1.75em;">Diamond</span><span style="color:white; font-size: 1.75em;">)</span>'''<br>
  border-radius: 5px;
<span style="color:#AAAAAA;">Contains a Realm Armorset piece with Randomized Attributes</span><br><br>
  padding: 10px; /* Increase padding for readability */
'''<span style="color:white;">Random Loot </span><span style="color:#AAAAAA;">(1 item)</span>'''<br>
  position: absolute;
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br>
  z-index: 1;
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br><br>
  top: 105%; /* Position the tooltip directly below the image */
'''<span style="color:#FFAA00;">Cost</span>'''<br>
  left: 50%;
* '''<span style="color:white;">3,990 Dwarf Mine Realm Points</span>'''<br><br>
  transform: translateX(-50%);
<span style="color:#AAAAAA;">Click to purchase item!</span>
  opacity: 0;
</span>|div|class="tooltip-cell"}}
  transition: opacity 0.3s;
| style="text-align: center; width: 16%; border: 1px solid black; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">'''<span style="color:#FFFF55; font-size: 1.75em;">Dwarf Forged Helmet</span> <span style="color:white; font-size: 1.75em;">(</span><span style="color:#FFFF55; font-size: 1.75em;">Diamond</span><span style="color:white; font-size: 1.75em;">)</span>'''<br>
  white-space: normal; /* Allows text to wrap within the tooltip */
<span style="color:#AAAAAA;">Contains a Realm Armorset piece with Randomized Attributes</span><br><br>
  box-sizing: border-box; /* Ensures padding doesn’t cause overflow */
'''<span style="color:white;">Random Loot </span><span style="color:#AAAAAA;">(1 item)</span>'''<br>
  line-height: 1.5; /* Space lines slightly for readability */
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br>
}
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br><br>
 
'''<span style="color:#FFAA00;">Cost</span>'''<br>
.tooltip-cell:hover .tooltip-text {
* '''<span style="color:white;">3,990 Dwarf Mine Realm Points</span>'''<br><br>
  visibility: visible;
<span style="color:#AAAAAA;">Click to purchase item!</span>
  opacity: 1;
</span>|div|class="tooltip-cell"}}
}
| style="text-align: center; width: 16%; border: 1px solid black; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">'''<span style="color:#FFFF55; font-size: 1.75em;">Dwarf Forged Helmet</span> <span style="color:white; font-size: 1.75em;">(</span><span style="color:#FFFF55; font-size: 1.75em;">Diamond</span><span style="color:white; font-size: 1.75em;">)</span>'''<br>
 
<span style="color:#AAAAAA;">Contains a Realm Armorset piece with Randomized Attributes</span><br><br>
/* Image styling to remove any extra space */
'''<span style="color:white;">Random Loot </span><span style="color:#AAAAAA;">(1 item)</span>'''<br>
.tooltip-cell img {
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br>
  display: inline-block;
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br><br>
  margin: 0 auto; /* Center image horizontally */
'''<span style="color:#FFAA00;">Cost</span>'''<br>
  padding: 0; /* Ensures no padding around image */
* '''<span style="color:white;">3,990 Dwarf Mine Realm Points</span>'''<br><br>
  width: 50px; /* Set image size if not specified directly in MediaWiki markup */
<span style="color:#AAAAAA;">Click to purchase item!</span>
}
</span>|div|class="tooltip-cell"}}
| style="text-align: center; width: 16%; border: 1px solid black; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">'''<span style="color:#FFFF55; font-size: 1.75em;">Dwarf Forged Helmet</span> <span style="color:white; font-size: 1.75em;">(</span><span style="color:#FFFF55; font-size: 1.75em;">Diamond</span><span style="color:white; font-size: 1.75em;">)</span>'''<br>
<span style="color:#AAAAAA;">Contains a Realm Armorset piece with Randomized Attributes</span><br><br>
'''<span style="color:white;">Random Loot </span><span style="color:#AAAAAA;">(1 item)</span>'''<br>
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br>
* '''<span style="color:#FFFF55;">1x Dwarf Forged Helmet</span>'''<br><br>
'''<span style="color:#FFAA00;">Cost</span>'''<br>
* '''<span style="color:white;">3,990 Dwarf Mine Realm Points</span>'''<br><br>
<span style="color:#AAAAAA;">Click to purchase item!</span>
</span>|div|class="tooltip-cell"}}
|-
<!-- Repeat similar rows to complete a 9x6 grid -->
|}

Revision as of 18:33, 27 October 2024

Dwarf Forged Helmet (Diamond)

Contains a Realm Armorset piece with Randomized Attributes

Random Loot (1 item)

  • 1x Dwarf Forged Helmet
  • 1x Dwarf Forged Helmet

Cost

  • 3,990 Dwarf Mine Realm Points

Click to purchase item!

Dwarf Forged Helmet (Diamond)

Contains a Realm Armorset piece with Randomized Attributes

Random Loot (1 item)

  • 1x Dwarf Forged Helmet
  • 1x Dwarf Forged Helmet

Cost

  • 3,990 Dwarf Mine Realm Points

Click to purchase item!

Dwarf Forged Helmet (Diamond)

Contains a Realm Armorset piece with Randomized Attributes

Random Loot (1 item)

  • 1x Dwarf Forged Helmet
  • 1x Dwarf Forged Helmet

Cost

  • 3,990 Dwarf Mine Realm Points

Click to purchase item!

Dwarf Forged Helmet (Diamond)

Contains a Realm Armorset piece with Randomized Attributes

Random Loot (1 item)

  • 1x Dwarf Forged Helmet
  • 1x Dwarf Forged Helmet

Cost

  • 3,990 Dwarf Mine Realm Points

Click to purchase item!

Dwarf Forged Helmet (Diamond)

Contains a Realm Armorset piece with Randomized Attributes

Random Loot (1 item)

  • 1x Dwarf Forged Helmet
  • 1x Dwarf Forged Helmet

Cost

  • 3,990 Dwarf Mine Realm Points

Click to purchase item!

Dwarf Forged Helmet (Diamond)

Contains a Realm Armorset piece with Randomized Attributes

Random Loot (1 item)

  • 1x Dwarf Forged Helmet
  • 1x Dwarf Forged Helmet

Cost

  • 3,990 Dwarf Mine Realm Points

Click to purchase item!

Retrieved from "https://wiki.cosmicsky.net/index.php?title=Tabletest&oldid=1188"