feast/src/components/NavButton.vue

<template>
  <button class="nav-button">
    {{ location.connections[direction].dst.name.capital.all }}
    <div class="tooltip-template">
      <div class="tooltip-title">{{ location.connections[direction].name }}</div>
      <div class="tooltip-body">{{ location.connections[direction].desc }}</div>
    </div>
  </button>
</template>

<script lang="ts">

import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Action, GroupAction } from '@/game/combat'
import { Creature } from '@/game/creature'
import { Place, Direction } from '@/game/world'
import tippy from 'tippy.js'

@Component({})
export default class NavButton extends Vue {
  @Prop()
  location!: Place

  @Prop()
  direction!: Direction

  mounted () {
    const elem = this.$el
    const tooltip = this.$el.querySelector(".tooltip-template") as HTMLElement
    tippy(
      elem,
      {
        content: tooltip
      }
    )
  }
}
</script>

<style scoped>

.nav-button {
  grid-area: var(--nav-direction);
  padding: 5%;
  background: #555;
  color: #ccc;
  font-size: 18pt;
  border-color: #ccc;
  border-width: 3px;
  border-radius: 8px;
  border-style: outset;
  outline: none;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.nav-button:hover {
  background: #666;
}

.nav-button:active {
  background: #777;
  border-style: inset;
}

.nav-button:focus {
  background: #666;
}
</style>