Add further tooltips

src/components/Statblock.vue

@@ -3,16 +3,16 @@
     <h2 v-if="subject.perspective === firstperson">You</h2>
     <h2 v-if="subject.perspective !== firstperson">{{subject.name.all.capital}}</h2>
     <div class="stat-line">
-      <div class="stat-entry" :data-tooltip="vigor" v-for="vigor in Object.keys(subject.vigors)" v-bind:key="vigor"><i :class="vigorIcons[vigor]" /><div>{{subject.vigors[vigor]}}</div></div>
+      <div class="stat-entry" :data-tooltip="vigor" :data-tooltip-full="vigorDescs[vigor]" v-for="vigor in Object.keys(subject.vigors)" v-bind:key="vigor"><i :class="vigorIcons[vigor]" /><div>{{subject.vigors[vigor]}}</div></div>
     </div>
     <br>
     <div class="stat-line">
-      <div class="stat-entry" :data-tooltip="stat" v-for="stat in Object.keys(subject.stats)" v-bind:key="stat"><i :class="statIcons[stat]" /> {{subject.stats[stat]}}</div>
+      <div class="stat-entry" :data-tooltip="stat" :data-tooltip-full="statDescs[stat]" v-for="stat in Object.keys(subject.stats)" v-bind:key="stat"><i :class="statIcons[stat]" /> {{subject.stats[stat]}}</div>
     </div>
     <br>
     <div class="stat-line">
-      <div class="stat-entry" data-tooltip="Bulk"><i class="fas fa-weight-hanging" /> {{subject.bulk}}</div>
-      <div class="stat-entry" data-tooltip="Prey Count"><i class="fas fa-utensils" /> {{ subject.containers.reduce((total, container) => total + container.contents.length, 0) }} </div>
+      <div class="stat-entry" data-tooltip="Bulk" data-tooltip-full="How much space you take up"><i class="fas fa-weight-hanging" /> {{subject.bulk}}</div>
+      <div class="stat-entry" data-tooltip="Prey Count" data-tooltip-full="How many people you've eaten"><i class="fas fa-utensils" /> {{ subject.containers.reduce((total, container) => total + container.contents.length, 0) }} </div>
     </div>
     <br>
     <div>Status: {{subject.status}}</div>
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
 import { Creature, POV } from '@/game/entity'
-import { Stats, Stat, StatIcons, Vigor, VigorIcons } from '@/game/combat'
+import { Stats, Stat, StatIcons, StatDescs, Vigor, VigorIcons, VigorDescs } from '@/game/combat'
 import ContainerView from './ContainerView.vue'
 @Component({
   components: {
@@ -36,6 +36,8 @@ export default class Statblock extends Vue {
 
   private vigorIcons = VigorIcons
   private statIcons = StatIcons
+  private vigorDescs = VigorDescs
+  private statDescs = StatDescs
   private vigor = Vigor
 
   firstperson: POV = POV.First
@@ -98,10 +100,52 @@ a {
   background: #555;
   padding: 8pt;
   border-radius: 8pt;
+  z-index: 1;
 }
 
 .stat-entry:hover::after {
   font-size: 18pt;
   opacity: 1;
 }
+
+.stat-entry::before {
+  opacity: 0;
+  position: absolute;
+  color: #eee;
+  font-size: 0pt;
+  content: attr(data-tooltip-full);
+  pointer-events: none;
+  left: 0pt;
+  top: 0pt;
+  transform: translate(calc(-50% + 16pt), calc(-100% - 18pt - 16pt));
+  white-space: nowrap;
+  transition: 0.1s;
+  background: #555;
+  padding: 8pt;
+  border-radius: 8pt;
+  z-index: 1;
+}
+
+.stat-entry:hover::before {
+  font-size: 12pt;
+  transition: all 1s cubic-bezier(1, 0, 0.75, 0);
+  opacity: 1;
+}
+</style>
+
+<style>
+
+.left-stats .stat-entry::after {
+  transform: translate(calc(0% + 16pt), -100%);
+}
+.left-stats .stat-entry::before {
+  transform: translate(calc(0% + 16pt), calc(-100% + 18pt + 16pt));
+}
+.right-stats .stat-entry::after {
+  transform: translate(calc(-100% + 16pt), -100%);
+}
+.right-stats .stat-entry::before {
+  transform: translate(calc(-100% + 16pt), calc(-100% + 18pt + 16pt));
+}
+
 </style>

src/game/combat.ts

@@ -30,6 +30,12 @@ export const VigorIcons: {[key in Vigor]: string} = {
   [Vigor.Resolve]: "fas fa-brain"
 }
 
+export const VigorDescs: {[key in Vigor]: string} = {
+  [Vigor.Health]: "How much damage you can take",
+  [Vigor.Stamina]: "How much energy you have",
+  [Vigor.Resolve]: "How much dominance you can resist"
+}
+
 export type Vigors = {[key in Vigor]: number}
 
 export enum Stat {
@@ -49,6 +55,15 @@ export const StatIcons: {[key in Stat]: string} = {
   [Stat.Willpower]: 'fas fa-book',
   [Stat.Charm]: 'fas fa-comments'
 }
+
+export const StatDescs: {[key in Stat]: string} = {
+  [Stat.Toughness]: 'Your physical resistance',
+  [Stat.Power]: 'Your physical power',
+  [Stat.Speed]: 'How quickly you can act',
+  [Stat.Willpower]: 'Your mental resistance',
+  [Stat.Charm]: 'Your mental power'
+}
+
 export interface CombatTest {
   test: (user: Creature, target: Creature) => boolean;
   odds: (user: Creature, target: Creature) => number;