Popovers

Use Popovers to display additional information or actions in a compact overlay triggered by user interaction.

Inbox Demo: Contact Profile Preview

Theme:

<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 u8lzq absolute q2770 wtwjs d7hs1 pzpkb w-full bg-popover cdmcr border-popover-line r16fm v0ms9 u14vs after:absolute after:top-0 after:-start-4 after:w-4 after:h-full" role="tooltip">
                    <div class="lybw0">
                      <span class="block w3bzn o6f5t sfddw">
                        Contact
                      </span>

<div class="flex flex-col n8cvq items-center tvmuq">
                        <img class="u5o7s lfcbs zf1zr" 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">
                        <h4 class="l6659 jywe6 t0mvh">
                          Lewis Clarke
                        </h4>
                      </div>

<div class="iibie qy7me">
                        <p class="o6f5t t0mvh">
                          <a class="inline-flex items-center nyjqy text-[13px] ke5c9 b3w12 gy8xr focus:outline-hidden mtsit" href="#">lewis@company.com</a>
                        </p>
                      </div>
        
                      
                      <div class="l9d0v rh3gh flex tv8hq items-center zgfau ah5oa">
                        <a class="inline-flex items-center nyjqy pwhcc sfddw qcjyt focus:outline-hidden pg80x disabled:opacity-50 disabled:pointer-events-none" href="#">
                          <svg class="u5o7s clxek" 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="g57km wgmrx inline-flex items-center nyjqy o6f5t g4xl4 cyaqi cdmcr nuipg va8bq xbcbd ssnal disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tw8rh">
                          <svg class="u5o7s y2ebh" 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>
              </div>
                  <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                </body>
              </html>

popovers.forEach((el) => {
                      const { element } = HSTooltip.getInstance(el, true);

element.show();
                    });
                  })();
                });
              </script>

<div class=" truncate">
                <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block unlex">
                  <span class="hs-tooltip-toggle relative ry1zd inline-flex items-center truncate o6f5t janna t0mvh cursor-pointer o12j5 gy8xr" tabindex="-1">
                    Lewis Clarke
                  </span>

Avatar Group with User Info Preview

Theme:

<!DOCTYPE html>
                <html lang="en" dir="" class="relative pdjr6 jfdv6">
                  <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                    <title>Preline UI</title>
                    <link rel="shortcut icon" href="../../favicon.ico">
                    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                    <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                  </head>
                  <body>
                    <div class="zmnul w-full p0ett mx-auto">
              <div class="flex -space-x-1">
                
                <div class="hs-tooltip inline-block">
                  <div class="gygig u5o7s flex flex-col gzu19 qy7me">
                    <img class="hs-tooltip-toggle relative inline-block dguee wqdlz ax8fm zf1zr y9un9" 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 q2770 ekpqr" role="tooltip">
                    <div class="lybw0 bg-popover cdmcr border-popover-line v0ms9 qubpl">
                      <div class="flex tv8hq u716i">
                        <img class="u5o7s yrj6t zf1zr" 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="r0vjv">
                          <span class="block o6f5t t0mvh">
                            Cho Muncho
                          </span>
                          <span class="block pwhcc sfddw">
                            chomuncho@site.com
                          </span>
          
                          <div class="l6659 flex items-center uc1pt yx5cx">
                            <svg class="u5o7s y2ebh uslet" 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] sfddw">
                              Accepted
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
              </div></div>
                    <script src="../../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                  </body>
                </html>
              <script>
                window.addEventListener('load', () => {
                  (function() {
                    const popovers = document.querySelectorAll('.hs-tooltip');

popovers.forEach((el) => {
                      const { element } = HSTooltip.getInstance(el, true);

element.show();
                    });
                  })();
                });
              </script>

<div class="flex -space-x-1">
                
                <div class="hs-tooltip inline-block">
                  <div class="gygig u5o7s flex flex-col gzu19 qy7me">
                    <img class="hs-tooltip-toggle relative inline-block dguee wqdlz ax8fm zf1zr y9un9" 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 q2770 ekpqr" role="tooltip">
                    <div class="lybw0 bg-popover cdmcr border-popover-line v0ms9 qubpl">
                      <div class="flex tv8hq u716i">
                        <img class="u5o7s yrj6t zf1zr" 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">

Get all the latest Preline updates and news.

Popovers

Inbox Demo: Contact Profile Preview

Avatar Group with User Info Preview

Subscribe

All examples