fix: tooltip text centered due to media-query

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index a7e31c00d3909538c706f2d3417c3849090b386b..f467f575ba1bb32301f030dc02154b3dba06c5e6 100644 (file)
--- a/public/assets/css/game.css
+++ b/public/assets/css/game.css
@@ -747,12 +747,12 @@ footer {
 
 /* tooltip styling */
 @media(pointer: coarse), (hover: none) {
-  [title] {
+  .tooltip[title] {
     position: realtive;
     display: flex;
     justify-content: center;
   }
-  [title]:focus::after {
+  .tooltip[title]:focus::after {
     content: attr(title);
     background-color: #fff;
     color: #222;

diff --git a/src/server/views/profile.ts b/src/server/views/profile.ts
index 547cdefebe097df44623791138de66cad149742a..e6a1c0cfca3086fa4258a92591da308c78463bf5 100644 (file)
--- a/src/server/views/profile.ts
+++ b/src/server/views/profile.ts
@@ -11,7 +11,7 @@ export function renderProfilePage(player: Player, equipment: EquippedItemDetails
 
   StatDef.forEach(stat => {
     statBreakdown += `<tr>
-      <th title="${stat.description}" tabindex="0">${stat.display}</th>
+      <th title="${stat.description}" tabindex="0" class="tooltip">${stat.display}</th>
       <td class="${stat.id}">
         ${player[stat.id].toLocaleString()}
         ${player.stat_points ? statPointIncreaser(stat) : ''}
@@ -22,23 +22,23 @@ export function renderProfilePage(player: Player, equipment: EquippedItemDetails
   const html = `<div id="extra-inventory-info">
   <table class="stat-breakdown">
     <tr>
-      <th title="The total amount of damage you can take before you pass out" tabindex="0">HP</th>
+      <th title="The total amount of damage you can take before you pass out" tabindex="0" class="tooltip">HP</th>
       <td>${player.hp.toLocaleString()}/${maxHp(player.constitution, player.level).toLocaleString()}</td>
     </tr>
     <tr>
-      <th title="Your energy level. Low vigor will cause your overall defence and damage to drop." tabindex="0">Vigor</th>
+      <th title="Your energy level. Low vigor will cause your overall defence and damage to drop." tabindex="0" class="tooltip">Vigor</th>
       <td>${player.vigor.toLocaleString()}/${maxVigor(player.constitution, player.level).toLocaleString()}</td>
     </tr>
     <tr>
-      <th title="How many experience points you need to get to your next level" tabindex="0">EXP</th>
+      <th title="How many experience points you need to get to your next level" tabindex="0" class="tooltip">EXP</th>
       <td>${player.exp.toLocaleString()}/${expToLevel(player.level + 1).toLocaleString()}</td>
     </tr>
     <tr>
-      <th title="The max defence you can have (and your true defence affected by your vigor)" tabindex="0">Defence</th>
+      <th title="The max defence you can have (and your true defence affected by your vigor)" tabindex="0" class="tooltip">Defence</th>
       <td>${totalDefence(equipment, player, false).toLocaleString()} (${totalDefence(equipment, player).toLocaleString()})</td>
     </tr>
     <tr>
-      <th title="You can use these to increase the base stats below" tabindex="0">Stat Points</th>
+      <th title="You can use these to increase the base stats below" tabindex="0" class="tooltip">Stat Points</th>
       <td class="stat_points">${player.stat_points}</td>
     </tr>
     ${statBreakdown}