edit: infobulle sur pc

2026-03-22 04:14:40 +01:00
parent 9982670841
commit 460f7f637d
17 changed files with 170 additions and 22 deletions
@@ -0,0 +1,98 @@
+<template>
+    <div id="infoBulleContainer" :style="{top: posY + 'px', left: posX + 'px'}">
+      <div v-show="isActive">{{bubbleContent}}</div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #infoBulleContainer{
+    width:161px;
+    position:fixed;
+    height:20px;
+    background-color: transparent;
+    z-index: 333;
+    pointer-events: none;
+  }
+
+  #infoBulleContainer div{
+    visibility: hidden;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    color: var(--back-color);
+    border-color: var(--main-color);
+    border-style: solid;
+    border-width: thin;
+    font-family: 'velvelyne';
+    font-weight: bold;
+    font-size: 10px;
+    line-height: 0.5em;
+    padding: 0;
+    margin: 0;
+    border-radius: 33px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    animation: blinkBack 1.61s infinite;
+    pointer-events: none;
+  }
+
+
+
+  /*================ PC LARGE*/
+  @media(min-width:800px){
+    #infoBulleContainer div{
+      visibility: visible;
+      font-size: 13.12px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'Infobulle',
+    data(){
+      return{
+        isActive: false,
+        posX: 0,
+        posY: 0,
+        bubbleContent:""
+      }
+    },
+    methods:{
+      loadBubble(event){
+        let item = event.target
+        if (!item.dataset.tooltip) {
+          this.hideBubble();
+          return
+        }
+        this.bubbleContent = item.dataset.tooltip;
+        this.posX = event.clientX - 200;
+        this.posY = event.clientY + 20;
+        this.isActive = true;
+      },
+      hideBubble(){
+        this.isActive = false
+      }
+    },
+    mounted(){
+      document.addEventListener('mousemove', this.loadBubble);
+      document.addEventListener('hideBubble', this.hideBubble);
+      console.log("Info-bubble is loaded!");
+    }
+  };
+</script>