feat: add support for using tooltips on buttons that are inside a but…

…ton group
themesberg · Dec 10, 2024 · 788f73a · 788f73a
1 parent 79b0c19
commit 788f73a
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 4 deletions.
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -2,6 +2,7 @@
 import FwbTooltipExample from './tooltip/examples/FwbTooltipExample.vue'
 import FwbTooltipExamplePosition from './tooltip/examples/FwbTooltipExamplePosition.vue'
 import FwbTooltipExampleStyle from './tooltip/examples/FwbTooltipExampleStyle.vue'
+import FwbTooltipExampleGroup from './tooltip/examples/FwbTooltipExampleGroup.vue'
 import FwbTooltipExampleTrigger from './tooltip/examples/FwbTooltipExampleTrigger.vue'
 </script>
 # Vue Tooltip - Flowbite
@@ -117,6 +118,34 @@ import { FwbButton, FwbTooltip } from 'flowbite-vue'
 </script>
 ```
 
+## Inside of Button Group
+
+You can use the tooltip component inside of the button group component.
+
+<fwb-tooltip-example-group />
+```vue
+<template>
+  <fwb-button-group>
+    <fwb-button>
+      Normal Button
+    </fwb-button>
+    <fwb-tooltip>
+      <template #trigger>
+        <fwb-button>
+          Button With Tooltip
+        </fwb-button>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </fwb-tooltip>
+  </fwb-button-group>
+</template>
+
+<script setup>
+import { FwbButton, FwbButtonGroup, FwbTooltip } from '../../../../src/index'
+</script>
+```
 
 
 ## triggerType

diff --git a/docs/components/tooltip/examples/FwbTooltipExampleGroup.vue b/docs/components/tooltip/examples/FwbTooltipExampleGroup.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="vp-raw">
+    <fwb-button-group>
+      <fwb-button>
+        Normal Button
+      </fwb-button>
+      <fwb-tooltip>
+        <template #trigger>
+          <fwb-button>
+            Button With Tooltip
+          </fwb-button>
+        </template>
+        <template #content>
+          Tooltip content
+        </template>
+      </fwb-tooltip>
+    </fwb-button-group>
+  </div>
+</template>
+
+<script setup>
+import { FwbButton, FwbButtonGroup, FwbTooltip } from '../../../../src/index'
+</script>
diff --git a/src/components/FwbButtonGroup/FwbButtonGroup.vue b/src/components/FwbButtonGroup/FwbButtonGroup.vue
@@ -8,13 +8,16 @@
 </template>
 
 <style>
-.fwb-button-group > button {
+.fwb-button-group > button,
+.fwb-button-group > .fwb-tooltip button {
   @apply rounded-none;
 }
-.fwb-button-group > button:first-child {
+.fwb-button-group > button:first-child,
+.fwb-button-group > .fwb-tooltip:first-child button {
   @apply rounded-l-lg;
 }
-.fwb-button-group > button:last-child {
+.fwb-button-group > button:last-child,
+.fwb-button-group > .fwb-tooltip:last-child button {
   @apply rounded-r-lg;
 }
 </style>
diff --git a/src/components/FwbTooltip/FwbTooltip.vue b/src/components/FwbTooltip/FwbTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-start">
+  <div class="fwb-tooltip flex items-start">
     <tooltip
       :placement="placement"
       :triggers="[trigger]"