Add bubble example

src/App.vue

@@ -1,8 +1,124 @@
 <script setup lang="ts">
+import Bubble from "./components/Bubble.vue";
 import AutoCompleteDemo from "./components/AutoCompleteDemo.vue";
 </script>
 
 <template>
   <h1>Autocomplete Demo</h1>
   <AutoCompleteDemo />
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, sem
+    vel faucibus luctus, ipsum justo rhoncus felis, non vestibulum orci magna ac
+    sapien. Aliquam porta felis sit amet urna hendrerit, a malesuada est
+    gravida. Duis lobortis turpis in erat varius, ornare mattis lacus porta.
+    Vivamus scelerisque est ante, nec mattis nulla commodo nec. Morbi pretium
+    bibendum lorem. Cras lacinia dolor eros, in pellentesque mi tempus vitae.
+    Morbi placerat est vitae arcu cursus, eget convallis mi finibus. Cras
+    lacinia sem ut felis dignissim, imperdiet lobortis ante fringilla. Sed quis
+    imperdiet velit. Suspendisse interdum ut quam vel luctus.
+  </p>
+  <p>
+    Maecenas et velit pharetra nibh mollis facilisis. Donec varius luctus
+    lobortis. Morbi vel quam eu nibh viverra dapibus. Orci varius natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus. In luctus
+    venenatis odio, ac sollicitudin quam vulputate et. Fusce sit amet fringilla
+    turpis. In et gravida ligula. Maecenas at maximus neque, gravida ultricies
+    quam. Nam ac tortor ut enim tincidunt pharetra. Ut fringilla vulputate
+    gravida. Sed scelerisque blandit eros, vel interdum lectus vestibulum eget.
+    Integer ac diam lorem. Pellentesque elementum ante sed molestie dictum. Sed
+    eleifend erat vel pulvinar efficitur.
+  </p>
+  <p>
+    Cras ornare urna lectus, et finibus odio blandit non. Curabitur scelerisque
+    suscipit lacinia. Sed sed hendrerit velit. Pellentesque eu est eget turpis
+    sodales auctor. Praesent pharetra venenatis diam, sit amet cursus mauris
+    tristique nec. In mattis imperdiet sapien quis blandit. Vestibulum ante
+    ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+    Morbi nec neque ullamcorper, feugiat felis vitae, vehicula ligula.
+  </p>
+  <p>
+    Vivamus vehicula quis neque at aliquet. Pellentesque sollicitudin vehicula
+    condimentum. Duis maximus malesuada lacus sed dignissim. Nullam non urna ac
+    felis congue porttitor quis vel metus. Nunc quis dui nec tortor egestas
+    mollis. Aliquam tincidunt nulla in urna pharetra gravida. Phasellus lorem
+    quam, aliquam at maximus pharetra, aliquam at sem. Nam nulla lacus, viverra
+    et tincidunt in, commodo nec nisi. Phasellus nisl leo, mattis id luctus a,
+    malesuada id lacus. Vivamus vel nulla eget tellus posuere luctus in in
+    augue. Integer massa nibh, egestas sit amet elementum ac, luctus quis
+    lectus. Nulla nulla justo, maximus sed purus in, dapibus finibus purus.
+    Aliquam eget purus efficitur, rhoncus risus vel, placerat orci.
+  </p>
+  <p>
+    Ut elementum, massa
+    <Bubble>
+      <template #default> nonaaaaa </template>
+
+      <template #Message>
+        nonaaaaanonaaaaanonaaaaanonaaaaanonaaaaanonaaaaanonaaaaa <br />
+        nonaaaaanonaaaaanonaaaaanonaaaaanonaaaaanonaaaaa
+      </template>
+    </Bubble>
+    venenatis molestie, purus nisl semper ligula, eu semper orci nibh sit amet
+    mi. Sed ut felis lacus. Maecenas finibus elit id hendrerit rutrum. Maecenas
+    porttitor tincidunt fermentum. Praesent convallis nibh sed elit laoreet,
+    quis faucibus ante lacinia. Suspendisse posuere aliquet ullamcorper. Quisque
+    malesuada magna sodales, mattis lacus eget, scelerisque sem. Donec eleifend
+    fringilla mi sit amet vehicula. In placerat id turpis at lacinia. Sed quis
+    interdum augue. Aenean volutpat, nisl vel tristique posuere, risus velit
+    faucibus arcu, id finibus velit magna eu nisi.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, sem
+    vel faucibus luctus, ipsum justo rhoncus felis, non vestibulum orci magna ac
+    sapien. Aliquam porta felis sit amet urna hendrerit, a malesuada est
+    gravida. Duis lobortis turpis in erat varius, ornare mattis lacus porta.
+    Vivamus scelerisque est ante, nec mattis nulla commodo nec. Morbi pretium
+    bibendum lorem. Cras lacinia dolor eros, in pellentesque mi tempus vitae.
+    Morbi placerat est vitae arcu cursus, eget convallis mi finibus. Cras
+    lacinia sem ut felis dignissim, imperdiet lobortis ante fringilla. Sed quis
+    imperdiet velit. Suspendisse interdum ut quam vel luctus.
+  </p>
+  <p>
+    Maecenas et velit pharetra nibh mollis facilisis. Donec varius luctus
+    lobortis. Morbi vel quam eu nibh viverra dapibus. Orci varius natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus. In luctus
+    venenatis odio, ac sollicitudin quam vulputate et. Fusce sit amet fringilla
+    turpis. In et gravida ligula. Maecenas at maximus neque, gravida ultricies
+    quam. Nam ac tortor ut enim tincidunt pharetra. Ut fringilla vulputate
+    gravida. Sed scelerisque blandit eros, vel interdum lectus vestibulum eget.
+    Integer ac diam lorem. Pellentesque elementum ante sed molestie dictum. Sed
+    eleifend erat vel pulvinar efficitur.
+  </p>
+  <p>
+    Cras ornare urna lectus, et finibus odio blandit non. Curabitur scelerisque
+    suscipit lacinia. Sed sed hendrerit velit. Pellentesque eu est eget turpis
+    sodales auctor. Praesent pharetra venenatis diam, sit amet cursus mauris
+    tristique nec. In mattis imperdiet sapien quis blandit. Vestibulum ante
+    ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+    Morbi nec neque ullamcorper, feugiat felis vitae, vehicula ligula.
+  </p>
+  <p>
+    Vivamus vehicula quis neque at aliquet. Pellentesque sollicitudin vehicula
+    condimentum. Duis maximus malesuada lacus sed dignissim. Nullam non urna ac
+    felis congue porttitor quis vel metus. Nunc quis dui nec tortor egestas
+    mollis. Aliquam tincidunt nulla in urna pharetra gravida. Phasellus lorem
+    quam, aliquam at maximus pharetra, aliquam at sem. Nam nulla lacus, viverra
+    et tincidunt in, commodo nec nisi. Phasellus nisl leo, mattis id luctus a,
+    malesuada id lacus. Vivamus vel nulla eget tellus posuere luctus in in
+    augue. Integer massa nibh, egestas sit amet elementum ac, luctus quis
+    lectus. Nulla nulla justo, maximus sed purus in, dapibus finibus purus.
+    Aliquam eget purus efficitur, rhoncus risus vel, placerat orci.
+  </p>
+  <p>
+    Ut elementum, massa non venenatis molestie, purus nisl semper ligula, eu
+    semper orci nibh sit amet mi. Sed ut felis lacus. Maecenas finibus elit id
+    hendrerit rutrum. Maecenas porttitor tincidunt fermentum. Praesent convallis
+    nibh sed elit laoreet, quis faucibus ante lacinia. Suspendisse posuere
+    aliquet ullamcorper. Quisque malesuada magna sodales, mattis lacus eget,
+    scelerisque sem. Donec eleifend fringilla mi sit amet vehicula. In placerat
+    id turpis at lacinia. Sed quis interdum augue. Aenean volutpat, nisl vel
+    tristique posuere, risus velit faucibus arcu, id finibus velit magna eu
+    nisi.
+  </p>
 </template>

src/components/Bubble.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = defineProps<{
+  message?: string;
+}>();
+</script>
+
+<template>
+  <span class="bubble-anchor">
+    <span>
+      <slot></slot>
+    </span>
+
+    <span class="bubble">
+      <slot v-if="!props.message" name="Message"></slot>
+      {{ props.message }}
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.bubble-anchor {
+  position: relative;
+}
+
+.bubble {
+  position: absolute;
+  white-space: nowrap;
+  bottom: 30px;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  background: #00aabb;
+  border-radius: 0.4em;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.bubble:after {
+  content: "";
+  position: absolute;
+  bottom: -15px;
+  left: 50%;
+  border: 15px solid transparent;
+  border-top-color: #00aabb;
+  border-bottom: 0;
+  border-left: 0;
+}
+</style>