Tailwind CSS Profile Popovers Blocks

Profile Popovers

Profile popovers for inline contact cards and avatar-group member previews.

An inline contact name opens a profile card with avatar, email, and footer actions.

<div class=" truncate">
                      <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block leading-4">
                        <span class="hs-tooltip-toggle relative z-7 inline-flex items-center truncate text-sm font-semibold text-foreground cursor-pointer underline-offset-2 hover:underline" tabindex="-1">
                          Lewis Clarke
                        </span>

<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-8 max-w-64 sm:max-w-xs w-full bg-popover border border-popover-line text-start rounded-xl shadow-md after:absolute after:top-0 after:-inset-s-4 after:w-4 after:h-full" role="tooltip">
                          <div class="p-4">
                            <span class="block mb-2 text-sm text-muted-foreground-1">
                              Contact
                            </span>

<div class="flex flex-col justify-center items-center gap-y-2">
                              <img class="shrink-0 size-12 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                              <p class="mt-2 font-medium text-foreground">
                                Lewis Clarke
                              </p>
                            </div>

<div class="mt-1 text-center">
                              <p class="text-sm text-foreground">
                                <a class="inline-flex items-center gap-x-1.5 text-[13px] text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">lewis@company.com</a>
                              </p>
                            </div>
        
                            
                            <div class="pt-4 mt-4 flex justify-between items-center border-t border-line-2">
                              <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
                                Flag
                              </a>

<button type="button" class="py-1.5 px-3 inline-flex items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                Add to contacts
                              </button>
                            </div>
                            
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related admin dashboard template

Avatar Group with Profile Popovers Pro

Overlapping avatars each open the same member card on click.

<div class="flex -space-x-1">
                      
                      <div class="hs-tooltip inline-block">
                        <div class="w-6 shrink-0 flex flex-col gap-y-1 text-center">
                          <img class="hs-tooltip-toggle relative inline-block size-6 ring-2 ring-card rounded-full hover:z-10" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                        </div>
                        <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20" role="tooltip">
                          <div class="p-4 bg-popover border border-popover-line rounded-xl shadow-xs">
                            <div class="flex justify-between gap-3">
                              <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                                <span class="block text-sm text-foreground">
                                  Cho Muncho
                                </span>
                                <span class="block text-xs text-muted-foreground-1">
                                  chomuncho@site.com
                                </span>
          
                                <div class="mt-2 flex items-center gap-x-1 whitespace-nowrap">
                                  <svg class="shrink-0 size-4 text-green-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
                                  <span class="block text-[13px] text-muted-foreground-1">
                                    Accepted
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                    </div>

Open related CRM customer bookings page

Profile Popovers

Contact Profile Popover Card Pro

Avatar Group with Profile Popovers Pro