Chat bubble - Top Aligned

[dolanmiu]

Can we have a chat bubble with the tail of the chat bubble on the top?

A mock up of what I am trying to convey:

Usage

<div class="chat chat-start chat-top">
  <div class="chat-bubble">It's over Anakin, <br/>I have the high ground.</div>
</div>

[saadeghi]

Yes, you can customize it like this:
https://play.tailwindcss.com/9vaX7xTnt0?file=css

.chat-start .chat-bubble{
  @apply rounded-tl-none rounded-bl-[1rem];
}
.chat-end .chat-bubble{
  @apply rounded-tr-none rounded-br-[1rem];
}
.chat-bubble:before{
  @apply top-0 [transform:rotateX(180deg)];
}

[dolanmiu]

Would it be better to have it as a standard simple class, like chat-top?

[saadeghi]

Maybe, but maybe not 😁
That arrow can be anywhere based on how we design a chat bubble. It can be top or bottom. it can be 1/3 top or 2/5 bottom or at the middle. it can be on the side, top or bottom. It can be rounded, an equilateral triangle or a right angle triangle. The triangle itself can have sharp or soft edges.

There can be infinite ways to design a chat bubble but it would be impossible to make class names for all possible designs. If we add a class name like this, there would be requests to add class name for other variants too. So I think it's better to do this level of customization inside the project, not the library.

[dolanmiu]

I see you argument, but a few reasons why I think having the bubble class can still work

1. The positioning is not too overwhelming, thats 16 positions (tailwind has way more in their spacing system - https://tailwindcss.com/docs/grid-template-columns

2. The arrow/tail can be a separate class?

   <div class="chat chat-start chat-top chat-tail-sharp">
     ...
   </div>

   chat-tail-sharp, chat-tail-curved etc. Then the user can define their own custom tail if they wish in the plugin config?

3. To prevent breaking changes, there would be a default tail style

It's still up to you, but I think this can be very powerful!

[jeremyteurterie]

Hello,

Can you show how I can achieve this ?

Thanks