Application toolkit - Popover

A simple and compact dialog of an action.

When to use

A simple popup menu to provide extra information or operations.

Comparing with Tooltip, besides information Popover card can include a header and provide action elements like links and buttons.

Interactions

Popover are typically dismissable, whether by click on other parts of the page or second clicking the popover target (depending on implementation), for that reason you can set up a popover to allow you to interact with other elements on the page while still being able to read it's content.

Conclusion

If you want to add any additional content, interactions, or content more than about a line; or if you need the content to remain open without the target being mousedover use a popover.

Although it should be noted due to accessibility problems, potential SEO issues, and lack of discovery of the popover, it's not recommended unless you absolutely need it.

Four directions

Four options are available: top, right, bottom, and left aligned.

Open this four directions popover example in new window
Copy four directions popover code 
<div class="flex flex-wrap gap-8 items-center min-h-[8rem]">
  <div class="hs-tooltip inline-block [--trigger:click] [--placement:left]">
    <a class="hs-tooltip-toggle block text-center" href="javascript:;">
      <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-hs2-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
        Left popover
      </div>
    </a>
  </div>

  <div class="hs-tooltip inline-block [--trigger:click]">
    <a class="hs-tooltip-toggle block text-center" href="javascript:;">
      <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-hs2-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
        Top popover
      </div>
    </a>
  </div>

  <div class="hs-tooltip inline-block [--trigger:click] [--placement:bottom]">
    <a class="hs-tooltip-toggle block text-center" href="javascript:;">
      <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-hs2-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2.27921 4.64001L7.92565 10.2865C8.12091 10.4817 8.4375 10.4817 8.63276 10.2865L14.2792 4.64001" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
        Bottom popover
      </div>
    </a>
  </div>

  <div class="hs-tooltip inline-block [--trigger:click] [--placement:right]">
    <a class="hs-tooltip-toggle block text-center" href="javascript:;">
      <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-hs2-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
        Right popover
      </div>
    </a>
  </div>
</div>
Close four directions popover code

Focus event

Use [--trigger:focus] class for focus event.

Open this focus event popover example in new window
Copy focus event popover code 
<div class="min-h-[6rem] flex items-end">
  <div class="hs-tooltip inline-block [--trigger:focus]">
    <a class="hs-tooltip-toggle block text-center" href="javascript:;">
      <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-hs2-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
        Focus me
      </div>
    </a>
  </div>
</div>
Close focus event popover code

Hover event

Use [--trigger:hover] class for hover event.

Open this hover event popover example in new window
Copy hover event popover code 
<div class="min-h-[6rem] flex items-end">
  <div class="hs-tooltip inline-block [--trigger:hover]">
    <a class="hs-tooltip-toggle block text-center" href="javascript:;">
      <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-hs2-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-3 px-4 bg-white border text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400" role="tooltip">
        Hover me
      </div>
    </a>
  </div>
</div>
Close hover event popover code

With content

Example with content.

Open this with content popover example in new window
Copy with content popover code 
<div class="min-h-[28rem] flex items-end">
  <div class="hs-tooltip inline-block [--trigger:click]">
    <a class="hs-tooltip-toggle block text-center" href="javascript:;">
      <span class="w-10 h-10 inline-flex justify-center items-center gap-2 rounded-md bg-gray-50 border border-gray-200 text-gray-600 hover:bg-blue-50 hover:border-blue-200 hover:text-hs2-primary-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[.05] dark:hover:border-white/[.1] dark:hover:text-white">
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2.27921 10.64L7.92565 4.99357C8.12091 4.79831 8.4375 4.79831 8.63276 4.99357L14.2792 10.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity inline-block absolute invisible z-10 max-w-xs bg-white border border-gray-100 text-left rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700" role="tooltip">
        <span class="pt-3 px-4 block text-lg font-bold text-gray-800 dark:text-white">Overview</span>
        <div class="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
          <svg class="rounded-md mb-3" viewBox="0 0 500 300" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="500" height="300" fill="#F9FAFB" />
            <path d="M215.232 131.849L237.249 58.489C237.723 56.9116 239.379 56.0108 240.961 56.4707L309.463 76.3953C311.062 76.8604 311.977 78.5394 311.499 80.1352L289.482 153.776C289.009 155.36 287.344 156.262 285.759 155.794L217.256 135.589C215.662 135.119 214.754 133.442 215.232 131.849Z" fill="#9CA3AF" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M208.527 129.837L230.545 56.4768C232.123 51.2189 237.644 48.2161 242.916 49.7493L311.418 69.6738C316.749 71.2244 319.796 76.821 318.206 82.1404L311.499 80.1352C311.977 78.5394 311.062 76.8604 309.463 76.3953L240.961 56.4707C239.379 56.0108 237.723 56.9116 237.249 58.489L215.232 131.849L208.527 129.837ZM215.232 131.849L208.527 129.837C206.934 135.145 209.961 140.735 215.276 142.303L283.779 162.508C289.062 164.067 294.611 161.059 296.189 155.781L318.206 82.1404L311.499 80.1352L289.482 153.776C289.009 155.36 287.344 156.262 285.759 155.794L217.256 135.589C215.662 135.119 214.754 133.442 215.232 131.849Z" fill="white" />
            <path d="M226.24 116.95L242.101 64.4837C242.577 62.9087 244.233 62.0111 245.813 62.4718L303.489 79.2932C305.078 79.7567 305.991 81.4199 305.53 83.0097L290.216 135.75C289.753 137.345 288.082 138.26 286.489 137.792L228.267 120.697C226.668 120.227 225.758 118.545 226.24 116.95Z" fill="white" />
            <path d="M287.926 133.756L293.102 116.559C293.269 116.002 293.186 115.401 292.875 114.91L288.879 108.616C288.496 108.012 287.819 107.659 287.105 107.69L282.125 107.905C281.628 107.926 281.163 108.141 280.781 108.46C278.026 110.771 275.562 109.763 269.94 110.321C265.378 110.773 265.688 111.978 266.502 112.608L266.514 112.617C266.598 112.682 266.688 112.752 266.764 112.823C280.594 125.785 254.907 121.641 249.518 121.938C245.561 122.156 245.914 124.023 247.415 124.321L285.465 135.103C286.516 135.401 287.611 134.801 287.926 133.756Z" fill="#D1D5DB" />
            <path d="M291.617 108.55L293.677 111.693C294.159 112.427 295.286 112.229 295.487 111.373L296.121 108.68C296.253 108.117 295.882 107.559 295.312 107.464L292.618 107.015C291.758 106.872 291.139 107.821 291.617 108.55Z" fill="#9CA3AF" />
            <path d="M279.208 100.667C278.22 103.156 278.28 104.208 278.498 104.532C278.561 104.625 278.683 104.64 278.796 104.64H283.753C284.767 104.64 285.383 102.961 284.799 102.131C283.888 100.836 283.114 99.1089 282.996 96.9988C282.704 91.8028 281.248 91.4971 280.082 90.2745C279.274 89.4261 278.991 89.5896 278.931 89.8474C278.912 89.9265 278.927 90.0066 278.946 90.0857C279.528 92.4879 280.355 97.7801 279.208 100.667Z" fill="#9CA3AF" />
            <path d="M260.19 85.5446L258.933 83.9016C258.613 83.4841 258.672 82.8904 259.066 82.5431L260.533 81.2521C261.205 80.6611 262.255 81.1818 262.191 82.0741L261.982 85.0081C261.916 85.9263 260.75 86.2757 260.19 85.5446Z" fill="#D1D5DB" />
            <path d="M262.325 88.8628C264.971 89.5868 264.831 83.1306 264.43 79.812C264.252 76.9158 266.038 80.1138 266.234 81.6222C266.535 83.9352 267.557 88.199 269.241 86.7509C270.926 85.3028 271.347 86.1476 271.347 86.7509C271.587 89.6472 269.442 90.3712 268.339 90.3712C264.43 90.0695 262.625 93.0864 260.52 93.9915C254.657 96.5124 253.603 90.9746 254.806 89.4661C255.282 88.8699 255.63 87.709 255.873 86.493C256.068 85.5152 257.621 85.1374 258.272 85.892C259.401 87.199 260.834 88.455 262.325 88.8628Z" fill="#9CA3AF" />
            <path d="M278.209 98.0223C278.859 93.4658 277.269 89.6147 277.269 86.0011C276.786 81.7233 271.509 92.4178 266.658 93.0289C261.807 93.64 255.44 100.668 253.317 99.14C252.456 98.5201 252.91 97.7168 253.818 96.9693C254.602 96.3236 254.414 94.4906 253.599 93.8845C252.364 92.9657 251.642 91.5161 252.711 89.3622C254.171 86.4193 254.578 84.4452 254.604 83.3878C254.615 82.9411 254.222 82.6481 253.778 82.7006C248.618 83.3121 243.673 87.8473 241.368 90.5981C241.077 90.9456 240.595 91.0734 240.177 90.8978L238.27 90.097C237.724 89.8674 237.098 90.1612 236.926 90.7286L229.757 114.35C229.562 114.992 230.04 115.64 230.711 115.639C238.424 115.632 252.614 115.565 256.956 115.334C262.716 115.029 256.349 112.584 256.956 108.001C257.562 103.418 278.785 108.612 276.966 105.862C275.56 103.737 277.06 100.109 278.074 98.3962C278.142 98.2812 278.19 98.1546 278.209 98.0223Z" fill="#D1D5DB" />
            <path d="M196.767 98.065L220.319 90.64L208.904 129.668C207.359 134.952 210.375 140.491 215.653 142.06L252.365 152.973L217.056 164.47C211.716 166.208 205.992 163.21 204.38 157.831L190.194 110.472C188.625 105.235 191.553 99.7088 196.767 98.065Z" fill="#9CA3AF" />
            <path d="M170.064 234.038C168.17 234.038 166.475 233.683 164.979 232.972C163.483 232.253 162.294 231.268 161.414 230.018C160.542 228.768 160.078 227.338 160.021 225.728H165.135C165.23 226.921 165.746 227.897 166.683 228.654C167.621 229.402 168.748 229.776 170.064 229.776C171.096 229.776 172.015 229.54 172.82 229.066C173.625 228.593 174.259 227.935 174.723 227.092C175.187 226.249 175.414 225.288 175.405 224.208C175.414 223.11 175.182 222.134 174.709 221.282C174.236 220.43 173.587 219.762 172.763 219.279C171.939 218.787 170.992 218.541 169.922 218.541C169.051 218.531 168.194 218.692 167.351 219.024C166.508 219.355 165.841 219.791 165.348 220.33L160.59 219.549L162.11 204.549H178.985V208.953H166.47L165.632 216.666H165.803C166.343 216.031 167.105 215.506 168.09 215.089C169.075 214.663 170.154 214.45 171.328 214.45C173.09 214.45 174.662 214.866 176.044 215.7C177.427 216.524 178.516 217.66 179.311 219.109C180.107 220.558 180.504 222.215 180.504 224.08C180.504 226.003 180.059 227.717 179.169 229.222C178.289 230.719 177.062 231.898 175.49 232.759C173.928 233.612 172.119 234.038 170.064 234.038Z" fill="#9CA3AF" />
            <path d="M196.016 234.194C193.677 234.194 191.669 233.602 189.993 232.418C188.326 231.225 187.043 229.506 186.144 227.262C185.253 225.008 184.808 222.295 184.808 219.123C184.818 215.951 185.268 213.252 186.158 211.026C187.057 208.792 188.341 207.087 190.007 205.913C191.683 204.738 193.686 204.151 196.016 204.151C198.345 204.151 200.348 204.738 202.024 205.913C203.7 207.087 204.984 208.792 205.874 211.026C206.773 213.261 207.223 215.96 207.223 219.123C207.223 222.305 206.773 225.023 205.874 227.276C204.984 229.521 203.7 231.235 202.024 232.418C200.358 233.602 198.355 234.194 196.016 234.194ZM196.016 229.748C197.834 229.748 199.269 228.853 200.32 227.063C201.38 225.264 201.911 222.617 201.911 219.123C201.911 216.812 201.669 214.871 201.186 213.299C200.703 211.727 200.021 210.543 199.141 209.748C198.26 208.943 197.218 208.541 196.016 208.541C194.207 208.541 192.777 209.44 191.726 211.239C190.675 213.029 190.145 215.657 190.135 219.123C190.126 221.443 190.358 223.394 190.831 224.975C191.314 226.557 191.996 227.75 192.877 228.555C193.757 229.35 194.804 229.748 196.016 229.748Z" fill="#9CA3AF" />
            <path d="M222.695 234.194C220.356 234.194 218.349 233.602 216.673 232.418C215.006 231.225 213.723 229.506 212.823 227.262C211.933 225.008 211.488 222.295 211.488 219.123C211.498 215.951 211.947 213.252 212.838 211.026C213.737 208.792 215.02 207.087 216.687 205.913C218.363 204.738 220.366 204.151 222.695 204.151C225.025 204.151 227.028 204.738 228.704 205.913C230.38 207.087 231.663 208.792 232.553 211.026C233.453 213.261 233.903 215.96 233.903 219.123C233.903 222.305 233.453 225.023 232.553 227.276C231.663 229.521 230.38 231.235 228.704 232.418C227.037 233.602 225.035 234.194 222.695 234.194ZM222.695 229.748C224.514 229.748 225.948 228.853 226.999 227.063C228.06 225.264 228.59 222.617 228.59 219.123C228.59 216.812 228.349 214.871 227.866 213.299C227.383 211.727 226.701 210.543 225.82 209.748C224.94 208.943 223.898 208.541 222.695 208.541C220.887 208.541 219.457 209.44 218.406 211.239C217.355 213.029 216.824 215.657 216.815 219.123C216.805 221.443 217.037 223.394 217.511 224.975C217.994 226.557 218.676 227.75 219.556 228.555C220.437 229.35 221.483 229.748 222.695 229.748Z" fill="#9CA3AF" />
            <path d="M256.222 229.208L239.56 212.575L242.77 209.35L259.418 225.998L256.222 229.208ZM242.77 229.208L239.56 225.998L256.222 209.35L259.418 212.575L242.77 229.208Z" fill="#9CA3AF" />
            <path d="M275.977 234.038C273.931 234.038 272.113 233.687 270.522 232.987C268.941 232.286 267.691 231.31 266.772 230.06C265.854 228.81 265.366 227.366 265.309 225.728H270.65C270.697 226.514 270.958 227.201 271.431 227.788C271.905 228.365 272.535 228.815 273.32 229.137C274.106 229.459 274.987 229.62 275.963 229.62C277.004 229.62 277.927 229.44 278.732 229.08C279.537 228.711 280.167 228.2 280.622 227.546C281.076 226.893 281.299 226.14 281.289 225.288C281.299 224.407 281.071 223.631 280.607 222.958C280.143 222.286 279.471 221.76 278.59 221.381C277.719 221.003 276.668 220.813 275.437 220.813H272.866V216.751H275.437C276.45 216.751 277.336 216.576 278.093 216.225C278.86 215.875 279.462 215.382 279.897 214.748C280.333 214.104 280.546 213.361 280.536 212.518C280.546 211.694 280.361 210.979 279.982 210.373C279.613 209.757 279.088 209.279 278.406 208.938C277.733 208.597 276.943 208.427 276.034 208.427C275.143 208.427 274.32 208.588 273.562 208.91C272.804 209.232 272.194 209.691 271.73 210.288C271.266 210.875 271.019 211.576 270.991 212.39H265.92C265.958 210.761 266.427 209.331 267.326 208.1C268.235 206.86 269.447 205.894 270.963 205.203C272.478 204.502 274.177 204.151 276.062 204.151C278.003 204.151 279.689 204.516 281.119 205.245C282.558 205.965 283.671 206.935 284.457 208.157C285.243 209.379 285.636 210.728 285.636 212.205C285.645 213.844 285.162 215.217 284.187 216.325C283.221 217.433 281.952 218.157 280.38 218.498V218.725C282.426 219.009 283.993 219.767 285.082 220.998C286.18 222.22 286.725 223.739 286.715 225.558C286.715 227.186 286.251 228.645 285.323 229.933C284.405 231.211 283.136 232.215 281.517 232.944C279.907 233.673 278.06 234.038 275.977 234.038Z" fill="#9CA3AF" />
            <path d="M302.344 234.194C300.005 234.194 297.997 233.602 296.321 232.418C294.655 231.225 293.371 229.506 292.472 227.262C291.582 225.008 291.137 222.295 291.137 219.123C291.146 215.951 291.596 213.252 292.486 211.026C293.386 208.792 294.669 207.087 296.335 205.913C298.012 204.738 300.014 204.151 302.344 204.151C304.673 204.151 306.676 204.738 308.352 205.913C310.029 207.087 311.312 208.792 312.202 211.026C313.102 213.261 313.551 215.96 313.551 219.123C313.551 222.305 313.102 225.023 312.202 227.276C311.312 229.521 310.029 231.235 308.352 232.418C306.686 233.602 304.683 234.194 302.344 234.194ZM302.344 229.748C304.162 229.748 305.597 228.853 306.648 227.063C307.709 225.264 308.239 222.617 308.239 219.123C308.239 216.812 307.997 214.871 307.514 213.299C307.031 211.727 306.35 210.543 305.469 209.748C304.588 208.943 303.547 208.541 302.344 208.541C300.535 208.541 299.105 209.44 298.054 211.239C297.003 213.029 296.473 215.657 296.463 219.123C296.454 221.443 296.686 223.394 297.159 224.975C297.642 226.557 298.324 227.75 299.205 228.555C300.085 229.35 301.132 229.748 302.344 229.748Z" fill="#9CA3AF" />
            <path d="M329.024 234.194C326.685 234.194 324.677 233.602 323.001 232.418C321.334 231.225 320.051 229.506 319.151 227.262C318.261 225.008 317.816 222.295 317.816 219.123C317.826 215.951 318.276 213.252 319.166 211.026C320.065 208.792 321.348 207.087 323.015 205.913C324.691 204.738 326.694 204.151 329.024 204.151C331.353 204.151 333.356 204.738 335.032 205.913C336.708 207.087 337.991 208.792 338.882 211.026C339.781 213.261 340.231 215.96 340.231 219.123C340.231 222.305 339.781 225.023 338.882 227.276C337.991 229.521 336.708 231.235 335.032 232.418C333.365 233.602 331.363 234.194 329.024 234.194ZM329.024 229.748C330.842 229.748 332.276 228.853 333.328 227.063C334.388 225.264 334.919 222.617 334.919 219.123C334.919 216.812 334.677 214.871 334.194 213.299C333.711 211.727 333.029 210.543 332.149 209.748C331.268 208.943 330.226 208.541 329.024 208.541C327.215 208.541 325.785 209.44 324.734 211.239C323.683 213.029 323.152 215.657 323.143 219.123C323.133 221.443 323.365 223.394 323.839 224.975C324.322 226.557 325.004 227.75 325.884 228.555C326.765 229.35 327.811 229.748 329.024 229.748Z" fill="#9CA3AF" />
          </svg>
          <p>This is a popover body with supporting text below as a natural lead-in to additional content.</p>
          <dl class="mt-3">
            <dt class="font-bold pt-3 first:pt-0 dark:text-white">Assigned to:</dt>
            <dd class="text-gray-600 dark:text-gray-400">Mark Welson</dd>
            <dt class="font-bold pt-3 first:pt-0 dark:text-white">Due:</dt>
            <dd class="text-gray-600 dark:text-gray-400">December 21, 2021</dd>
          </dl>
        </div>
      </div>
    </a>
  </div>
</div>
Close with content popover code