tool-tip

A tooltip for extra information on hover.

Unstyled it looks like this:

code

<p>
  <tool-tip label="Hello tooltip!">Hover over me!</tool-tip>
</p>

Hover over me!

Colors

Colors are set with the --tool-tip-color and --tool-tip-bg-color CSS variables.

code

<style>
  .styled-colors {
    --tool-tip-bg-color: var(--color);
    --tool-tip-color: var(--color-bg);
  }
</style>
<p>
  <tool-tip label="Hello tooltip!" class="styled-colors">Hover over me!</tool-tip>
</p>

Hover over me!

Font

The font is set with the following CSS variables:

--tool-tip-font-size
--tool-tip-font-family
--tool-tip-font-weight

code

  <style>
    .styled-font {
      --tool-tip-font-size: 1.2em;
      --tool-tip-font-family: var(--monospace);
      --tool-tip-font-weight: bold;
    }
  </style>
  <p>
    <tool-tip label="Hello tooltip!" class="styled-colors styled-font">Hover over me!</tool-tip>
  </p>

Hover over me!

Width

When the label is large, control the width with --tool-tip-width.

code

<style>
  .big-label {
    --tool-tip-width: 300px;
    --tool-tip-font-size: 0.8em;
  }
</style>
<p>
  <tool-tip label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." class="styled-colors big-label">Hover over me!</tool-tip>
</p>

Hover over me!

Position

With the position attribute you can choose where the tooltip is shown.

      code
      
        <div>
  <tool-tip label="Hello!" position="top" class="styled-colors">Top (default)</tool-tip>
  <br>
  <tool-tip label="Hello!" position="left" class="styled-colors">Left</tool-tip>
  <br>
  <tool-tip label="Hello!" position="right" class="styled-colors">Right</tool-tip>
  <br>
  <tool-tip label="Hello!" position="bottom" class="styled-colors">Bottom</tool-tip>
</div>

  Top (default)
  
  Left
  
  Right
  
  Bottom

Elements

It can be put around text, as in the examples above, or around an element.

code

<tool-tip label="Hello tooltip!" class="styled-colors">
  <a href="#">Hover over me!</a>
</tool-tip>

Hover over me!

Void elements

Note that it does not work on void elements such as <input> or <img>. Unless you wrap them in another element.

code

<tool-tip label="Hello tooltip!" class="styled-colors">
  <div>
    <input placeholder="Hover over me!">
  </div>
</tool-tip>