CosmicSky

Tabletest: Difference between revisions

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
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Tooltip table styling */
{| class="tooltip-table" style="border-collapse: collapse; width: 10%;"
.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">[[File:glowtorch.png|500px]]</span>|div|class="tooltip-cell"}}
  width: auto; /* Adjust width to fit content if needed */
| style="text-align: center; width: 16%; border: 1px solid black; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">[[File:LBGenesis.png|300px]]</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">[[File:LBGenesis.png|300px]]</span>|div|class="tooltip-cell"}}
|-
<!-- Repeat similar rows to complete a 9x6 grid -->
|}


.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 {
  visibility: hidden;
  width: 350px; /* Increase width for more space */
  background-color: #333;
  color: #fff;
  text-align: left; /* Align text to the left */
  border-radius: 5px;
  padding: 10px; /* Increase padding for readability */
  position: absolute;
  z-index: 1;
  top: 105%; /* Position the tooltip directly below the image */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  white-space: normal; /* Allows text to wrap within the tooltip */
  box-sizing: border-box; /* Ensures padding doesn’t cause overflow */
  line-height: 1.5; /* Space lines slightly for readability */
}


.tooltip-cell:hover .tooltip-text {
{| class="tooltip-table wikitable" style="width: 10%;"
  visibility: visible;
|-
  opacity: 1;
| style="text-align: center; width: 16%; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">[[File:glowtorch.png|500px]]</span>|div|class="tooltip-cell"}}
}
| style="text-align: center; width: 16%; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">[[File:LBGenesis.png|300px]]</span>|div|class="tooltip-cell"}}
| style="text-align: center; width: 16%; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">[[File:LBGenesis.png|300px]]</span>|div|class="tooltip-cell"}}
|-
<!-- Repeat similar rows as needed -->
|}


/* Image styling to remove any extra space */
{| class="tooltip-table wikitable" style="width: 10%;"
.tooltip-cell img {
|-
  display: inline-block;
| style="text-align: center; width: 16%; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">[[File:glowtorch.png|500px]]</span>|div|class="tooltip-cell"}}
  margin: 0 auto; /* Center image horizontally */
| style="text-align: center; width: 16%; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">[[File:LBGenesis.png|300px]]</span>|div|class="tooltip-cell"}}
  padding: 0; /* Ensures no padding around image */
| style="text-align: center; width: 16%; padding: 0;" | {{#tag:div|[[File:Diamond.png|50px]]<span class="tooltip-text">[[File:LBGenesis.png|300px]]</span>|div|class="tooltip-cell"}}
  width: 50px; /* Set image size if not specified directly in MediaWiki markup */
|-
}
<!-- Repeat similar rows to complete a 9x6 grid -->
|}

Latest revision as of 19:39, 27 October 2024


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