Button with tooltip within input group faces wrong direction

[joshistoast]

When adding a tooltip to a button within an input group, the button corner radius faces the wrong direction. Doesn't seem to be much of an issue when appending the button to the end of an input group, but a different story of course for prepending.

<div class="form-control">
  <label for="handle" class="label label-text">
    Property Handle
  </label>
  <div class="input-group">
    <div class="tooltip tooltip-bottom" data-tip="Generate a handle from title">
      <button
        class="gap-2 btn btn-square"
        @click.prevent="generateHandle"
      >
        <Icon name="ph:arrow-clockwise-bold" class="w-5 h-5" />
      </button>
    </div>
    <input
      id="handle"
      placeholder="Handle"
      class="w-full input input-bordered" />
    </div>
    <label class="label" for="handle">
      <span class="label-text-alt">A URL-friendly identifier for this property</span>
    </label>
</div>

[amisora]

Hi! My 2 cents here:

Looks like the input-group only assigns borders to the direct first and last children... I'm not sure how to solve this so here is a workaround:

You can assign tooltip classes along with data-tip directly to the button tag. And to fix the display being overridden, you can throw inline-flex in there 🥲

<button class="tooltip-top btn btn-square tooltip inline-flex" data-tip="Generate a handle from title">

[primos63]

Per the documentation for Input group, Input group puts an input next to a text or a button. The code provided doesn't follow the documentation.

These are the rules affecting the Input group:

.input-group :first-child {
  border-top-left-radius: var(--rounded-btn, 0.5rem);
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--rounded-btn, 0.5rem);
  border-bottom-right-radius: 0;
}

.input-group :last-child {
  border-top-left-radius: 0;
  border-top-right-radius: var(--rounded-btn, 0.5rem);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}

The <button> is the first and last child of its parent, <div class='tooltip'>. So the styling of the first CSS rule is overwritten by the second rule. This is why the button rounding appears to be in the wrong direction. Both rules will also apply to Icon. It will have rounded righthand corners if you apply a border. The second rule is applied to <input> because it is the last child of its parent <div class='input-group'>. The rounded corners appear correct in this case.

I agree with @amisora. You should use button with the tooltip class. I don't see the need to add inline-flex to the button as it's already defined in the btn class.

.btn {
  display: inline-flex;
  flex-shrink: 0;
  /* ... */
}

Here is a Tailwind Playground with borders showing first and last child elements.

[saadeghi]

What do you think about this idea: https://github.com/saadeghi/daisyui/discussions/1572

[saadeghi]

This is no longer an issue with the new join class name:
https://daisyui.com/components/join/