add button tooltip

src/assets/css/tooltip.css

@@ -0,0 +1,44 @@
+.tooltiped {
+  position: relative;
+}
+.tooltiped::after,
+.tooltiped::before {
+  pointer-events: none;
+  transition: all 0.18s ease-out 0.18s;
+  position: absolute;
+  z-index: 10;
+  bottom: 100%;
+  left: 50%;
+  transform-origin: top;
+  transform: translate(-50%, 4px);
+  opacity: 0;
+}
+.tooltiped::after {
+  content: attr(aria-tooltip);
+  background: var(--color-neutral-200);
+  padding: 0.5em 1em;
+  border-radius: 4px;
+  color: #fff;
+  line-height: 1em;
+  font-size: 1em;
+  font-weight: normal;
+  white-space: normal;
+
+  text-align: center;
+  margin-bottom: 10px;
+}
+.tooltiped--medium::after {
+  width: 160px;
+}
+.tooltiped::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: var(--color-neutral-200);
+}
+.tooltiped:hover::before,
+.tooltiped:hover::after {
+  transform: translate(-50%, 0);
+  opacity: 1;
+}

src/components/checkBox.vue

@@ -2,12 +2,15 @@
   <label :class="{ filled }" :for="id">
     <input :id="id" type="checkbox" v-model="checked" />
     <span>{{ label }}</span>
-    <span v-if="help" class="help" :aria-label="help"><i class="material-icons">info</i></span>
+    <span v-if="help" class="tooltiped tooltiped--medium" :aria-tooltip="help"
+      ><i class="material-icons">info</i></span
+    >
   </label>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import "@/assets/css/tooltip.css";
 
 export default defineComponent({
   data() {
@@ -98,51 +101,13 @@ input[type="checkbox"]:checked {
   width: 8px;
   height: 14px;
 }
-.help .material-icons {
+.tooltiped .material-icons {
   vertical-align: text-top;
   font-size: 1em;
 }
-.help {
-  font-size: 1em;
+.tooltiped {
   color: var(--color-accent-400);
   position: relative;
   margin-left: 4px;
 }
-.help::after,
-.help::before {
-  pointer-events: none;
-  transition: all 0.18s ease-out 0.18s;
-  position: absolute;
-  z-index: 10;
-  bottom: 100%;
-  left: 50%;
-  transform-origin: top;
-  transform: translate(-50%, 4px);
-  opacity: 0;
-}
-.help::after {
-  content: attr(aria-label);
-  background: var(--color-neutral-200);
-  padding: 0.5em 1em;
-  border-radius: 4px;
-  color: #fff;
-  line-height: 1em;
-  font-weight: normal;
-  white-space: normal;
-  width: 160px;
-  text-align: center;
-  margin-bottom: 10px;
-}
-.help::before {
-  content: "";
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-top-color: var(--color-neutral-200);
-}
-.help:hover::before,
-.help:hover::after {
-  transform: translate(-50%, 0);
-  opacity: 1;
-}
 </style>

src/views/Evenement.vue

@@ -26,7 +26,11 @@
         <button class="btn primary small" @click="clickInput">
           <i class="material-icons">upload</i>Import des données
         </button>
-        <button class="btn small icon error" @click="toggleModal">
+        <button
+          class="btn small icon error tooltiped tooltiped--medium"
+          @click="toggleModal"
+          aria-tooltip="Nettoyer le planning"
+        >
           <i class="material-icons">event_busy</i>
         </button>
         <input
@@ -64,7 +68,11 @@
     <div>
       <h2>
         Version antérieurs
-        <button class="btn icon small secondary" @click="updatePlanningVersions">
+        <button
+          class="btn icon small secondary tooltiped tooltiped--medium"
+          aria-tooltip="Rafraichir le liste des versions"
+          @click="updatePlanningVersions"
+        >
           <i class="material-icons">refresh</i>
         </button>
       </h2>

src/views/Home.vue

@@ -5,9 +5,10 @@
       <h3>
         Planning existants
         <button
-          class="btn icon primary small"
+          class="btn icon primary small tooltiped"
           style="margin-left: 1rem; vertical-align: bottom"
           @click="$emit('newEvenement')"
+          aria-tooltip="Creer un nouvel évenement"
         >
           <i class="material-icons">edit</i>
         </button>

src/views/Planning.vue

@@ -14,10 +14,14 @@
           <button class="btn small secondary" @click="createRessource">
             <i class="material-icons">create</i>Ligne
           </button>
-          <button class="btn icon small primary" @click="zoom(1)">
+          <button class="btn icon small primary tooltiped" aria-tooltip="Zoomer" @click="zoom(1)">
             <i class="material-icons">zoom_in</i>
           </button>
-          <button class="btn icon small primary" @click="zoom(-1)">
+          <button
+            class="btn icon small primary tooltiped"
+            aria-tooltip="Dezoomer"
+            @click="zoom(-1)"
+          >
             <i class="material-icons">zoom_out</i>
           </button>
         </div>