feat: Added tooltip component (refs #DH-1089) (#38)

package.json

@@ -52,6 +52,7 @@
     "@vueuse/core": "^10.6.1",
     "nanoid": "3.3.7",
     "tailwind-merge": "^1.14.0",
+    "tippy.js": "^6.3.7",
     "unplugin-auto-import": "^0.16.7"
   },
   "peerDependencies": {

src/components/BuiTooltip/BuiTooltip.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css'
+import { onMounted } from 'vue'
+import InfoIcon from '@/components/CommonElements/InfoIcon.vue'
+import { nanoid } from 'nanoid'
+
+const props = defineProps<{ content: string; variant: 'info' | 'id' | 'slot'; id?: string }>()
+const componentId = nanoid()
+
+onMounted(() => {
+  const selector = props.variant === 'id' && props.id ? `#${props.id}` : `#${componentId}`
+
+  tippy(selector, {
+    trigger: 'click',
+    interactive: true,
+    allowHTML: true,
+    arrow: false,
+    placement: 'right-end',
+    theme: 'bui-tippy',
+    content: props.content
+  })
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div
+      v-if="variant === 'info' || (variant === 'id' && !id)"
+      class="w-fit relative text-primary-500 hover:text-primary-550 py-1 cursor-pointer"
+      :id="componentId"
+    >
+      <InfoIcon />
+    </div>
+    <div v-if="variant === 'slot'" :id="componentId" class="cursor-pointer relative w-fit">
+      <slot name="element" />
+    </div>
+  </div>
+</template>
+
+<style>
+.tippy-box[data-theme~='bui-tippy'] {
+  background-color: #7371f9;
+  color: #f5f6f8;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  box-shadow:
+    0px 56px 24px 0px rgba(41, 40, 65, 0.08),
+    0px 32px 24px 0px rgba(41, 40, 65, 0.08),
+    0px 32px 24px 0px rgba(41, 40, 65, 0.08);
+}
+.tippy-box[data-theme~='bui-tippy'] .tippy-content {
+  padding: 0;
+}
+</style>

src/components/BuiTooltip/BuiTooltips.story.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import BuiTooltip from '@/components/BuiTooltip/BuiTooltip.vue'
+</script>
+
+<template>
+  <Story title="BuiTooltip" autoPropsDisabled :layout="{ type: 'grid', width: '100%' }">
+    <Variant title="variant 'info'">
+      <br /><br />
+      <br /><br />
+      <BuiTooltip
+        variant="info"
+        content="My tooltip info <a href='https://stsoft.ru'>ST Soft</a>"
+      />
+      <br />
+      <BuiTooltip variant="info" content="Another info" />
+      <br /><br />
+      <br /><br />
+    </Variant>
+    <Variant title="variant 'slot'">
+      <br /><br />
+      <br /><br />
+      <BuiTooltip variant="slot" content="My tooltip info <a href='https://stsoft.ru'>ST Soft</a>">
+        <template #element>
+          <span class="p-2 text-primary-500 text-base"> Click here (slot) </span>
+        </template>
+      </BuiTooltip>
+      <br /><br />
+      <br /><br />
+    </Variant>
+    <Variant title="variant 'id'">
+      <br /><br />
+      <br /><br />
+      <span id="div-for-tooltip" class="p-2 text-primary-500 text-base"> Click here (id) </span>
+      <BuiTooltip
+        variant="id"
+        id="div-for-tooltip"
+        content="My tooltip info <a href='https://stsoft.ru'>ST Soft</a>"
+      />
+      <br /><br />
+      <br /><br />
+    </Variant>
+  </Story>
+</template>
+<style scoped></style>

src/components/CommonElements/InfoIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path
+      d="M8 1.5C9.69354 1.59343 11.2931 2.30824 12.4924 3.50757C13.6918 4.7069 14.4066 6.30647 14.5 8C14.4066 9.69353 13.6918 11.2931 12.4924 12.4924C11.2931 13.6918 9.69354 14.4066 8 14.5C6.30647 14.4066 4.70691 13.6918 3.50758 12.4924C2.30825 11.2931 1.59343 9.69353 1.5 8C1.59343 6.30647 2.30825 4.7069 3.50758 3.50757C4.70691 2.30824 6.30647 1.59343 8 1.5ZM8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346625 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM8 3.5C7.80222 3.5 7.60888 3.55865 7.44443 3.66853C7.27998 3.77841 7.15181 3.93459 7.07612 4.11732C7.00044 4.30004 6.98063 4.50111 7.01922 4.69509C7.0578 4.88907 7.15304 5.06725 7.2929 5.20711C7.43275 5.34696 7.61093 5.4422 7.80491 5.48079C7.99889 5.51937 8.19996 5.49957 8.38269 5.42388C8.56541 5.34819 8.72159 5.22002 8.83147 5.05557C8.94135 4.89112 9 4.69778 9 4.5C9 4.23478 8.89465 3.98043 8.70711 3.79289C8.51957 3.60536 8.26522 3.5 8 3.5ZM8.5 6.5H7.5C7.3674 6.5 7.24022 6.55268 7.14645 6.64645C7.05268 6.74021 7 6.86739 7 7V12C7 12.1326 7.05268 12.2598 7.14645 12.3536C7.24022 12.4473 7.3674 12.5 7.5 12.5H8.5C8.63261 12.5 8.75979 12.4473 8.85356 12.3536C8.94733 12.2598 9 12.1326 9 12V7C9 6.86739 8.94733 6.74021 8.85356 6.64645C8.75979 6.55268 8.63261 6.5 8.5 6.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/index.ts

@@ -19,3 +19,4 @@ export { default as BuiTableHead } from './components/BuiTable/BuiTableHead.vue'
 export { default as BuiTableHeadCell } from './components/BuiTable/BuiTableHeadCell.vue'
 export { default as BuiTableRow } from './components/BuiTable/BuiTableRow.vue'
 export { default as BuiProgressBar } from './components/BuiProgress/BuiProgress.vue'
+export { default as BuiTooltip } from './components/BuiTooltip/BuiTooltip.vue'