1. <template>
2.   <div class="tooltip-box">
3.     <slot />
4.     <div class="tooltip">
5.       <!-- bg-white text-center p-5 border-r-2 w-1/12 bottom-full left-1/2 -ml-96 opacity-0 transition-opacity absolute bg-accent -->
6.       <span class="text-primary">{{ text }}</span>
7.     </div>
8.   </div>
9. </template>
10.  
11. <script>
12. export default {
13.   props: {
14.     text: {
15.       type: String,
16.       required: true,
17.     },
18.   },
19. };
20. </script>
21.  
22. <style scoped>
23. .tooltip-box {
24.   position: relative;
25.   display: inline-block;
26. }
27.  
28. .tooltip-box:hover .tooltip {
29.   opacity: 1;
30. }
31.  
32. .tooltip {
33.   color: #ffffff;
34.   text-align: center;
35.  
36.   width: 120px;
37.   bottom: 100%;
38.   left: 50%;
39.   margin-left: -60px;
40.  
41.   opacity: 0;
42.   transition: opacity 1s;
43.  
44.   position: absolute;
45.   z-index: 1;
46.  
47.   background: #00ba73;
48. }
49.  
50. .text::after {
51.   content: " ";
52.   position: absolute;
53.   top: 100%;
54.   left: 50%;
55.   border-style: solid;
56.   border-color: #00ba73 transparent transparent transparent;
57. }
58. </style>
59.