Tooltip

Dependencies

Live
Added in version 0.5.0
Last updated in version 0.8.0
Link to section

This element has no dependencies and should work with the BAS style kit Javascript.

Uses

Link to section

Pop-overs can be useful for displaying summary information inside other elements, such as basic details about a feature on a map.

In most cases pop-overs should be avoided as they are hard to make accessible and do not work well on mobiles or small devices, especially where there is a lot of content.

Examples

Link to section

Extra space is added above the example below to fit into the example box.

Hover me

<div class="p-4"></div> <!-- Extra space -->
<div class="tool-tip-position relative group inline-block">
  <div class="absolute bottom-full left-1/2 mb-2 hidden -translate-x-1/2 group-hover:block bg-gray-800 text-white px-2 py-1 rounded whitespace-nowrap">
      Tooltip
      <div class="absolute w-2 h-2 bg-gray-800 rotate-45 left-1/2 -translate-x-1/2 -bottom-1"></div>
  </div>
  <div class="bg-gray-300 py-1 px-2">
      Hover me
  </div>
</div>