Tooltip pure css tooltip with attribute and tag function and 12 positions

Case of use

base #

Example Code

					<span tabindex="-1" class="has-tooltip button" data-tooltip="Tooltip will start at the  top of element.Lorem ipsum dolor sit amet consectetur ">
  base of tooltip
</span>

position, focusable #

Example Code

	left	center	right
top	top-left (default) left-top	center-top	right (top) right-top
middle	left-middle		right-middle
bottom	left-bottom bottom	bottom-center	right-bottom bottom-right

					<table class="text-center table-mobile borders-horizontal">
    <thead>
      <tr>
        <th></th>
        <th>left</th>
        <th>center</th>
        <th>right</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>top</th>
        <td data-th="left">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button" data-tooltip="Tooltip will start at top / right of element">
                top-left (default)
              </span>
              <span tabindex="-1" class="has-tooltip button left-top" data-tooltip="Lorem ipsum dolor sit amet">
                left-top
              </span>
            </span>
          </span>
        </td>
        <td data-th="center">
          <span>
            <span tabindex="-1" class="has-tooltip button center" data-tooltip="Tooltip at the center top">
              center-top
            </span>
          </span>
        </td>
        <td data-th="right">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button right" data-tooltip="Tooltip will start at top  / left of element">
                right (top)
              </span>
              <span tabindex="-1" class="has-tooltip button right-top" data-tooltip="Lorem ipsum dolor sit amet">
                right-top
              </span>
            </span>
          </span>
        </td>
      </tr>
      <tr>
        <th>middle</th>
        <td data-th="left">
          <span>
            <span tabindex="-1" class="has-tooltip button left-middle" data-tooltip="Lorem ipsum dolor sit amet">
              left-middle
            </span>
          </span>
        </td>
        <td>
            <img src="/img/logo/formir-64.png">
        </td>
        <td data-th="right">
          <span>
            <span tabindex="-1" class="has-tooltip button right-middle" data-tooltip="Lorem ipsum dolor sit amet">
              right-middle
            </span>
          </span>
        </td>
      </tr>
      <tr>
        <th>bottom</th>
        <td data-th="left">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button left-bottom" data-tooltip="Lorem ipsum dolor sit amet">
                left-bottom
              </span>
              <span tabindex="-1" class="has-tooltip button bottom" data-tooltip="Tooltip will start at bottom / right of element">
                bottom
              </span>
            </span>
          </span>
        </td>
        <td data-th="center">
          <span>
            <span tabindex="-1" class="has-tooltip button bottom-center" data-tooltip="Lorem ipsum dolor sit amet">
              bottom-center
            </span>
          </span>
        </td>
        <td data-th="right">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button right-bottom" data-tooltip="Tooltip will start at the ">
                right-bottom
              </span>
              <span tabindex="-1" class="has-tooltip button bottom-right" data-tooltip="Tooltip will start at bottom  / left of element">
                bottom-right
              </span>
            </span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>

inside html, focusable #

Example Code

					<span>
  <span tabindex="-1" class="has-tooltip button">
    right-middle
    <span class="tooltip right-middle">Lorem ipsum <br>dolor sit amet</span>
  </span>
</span>

inside html, focusable #

Example Code

	left	center	right
top	top-left (default) Tooltip will start at top / right of element left-top Tooltip will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.	center-top Tooltip at the center top	right (top) Tooltip will start at top / left of element right-top Tooltip will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.
middle	left-middle Tooltip left middle Lorem ipsum dolor sit amet		right-middle Lorem ipsum dolor sit amet
bottom	left-bottom Tooltip will start at the top of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam. bottom Tooltip will start at bottom / right of element	bottom-center Tooltip bottom center Lorem ipsum dolor sit amet	right-bottom Tooltip will start at the bottom-right Tooltip will start at bottom / left of element

					<table class="text-center table-mobile borders-horizontal">
    <thead>
      <tr>
        <th></th>
        <th>left</th>
        <th>center</th>
        <th>right</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>top</th>
        <td data-th="left">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button">
                top-left (default)
                <span class="tooltip">Tooltip will start at top / right of element</span>
              </span>
              <span tabindex="-1" class="has-tooltip button">
                left-top
                <span class="tooltip left-top"><u>Tooltip</u> will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.</span>
              </span>
            </span>
          </span>
        </td>
        <td data-th="center">
          <span>
            <span tabindex="-1" class="has-tooltip button">
              center-top
              <span class="tooltip center"><u>Tooltip</u> at the center top</span>
            </span>
          </span>
        </td>
        <td data-th="right">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button">
                right (top)
                <span class="tooltip right">Tooltip will start at top  / left of element</span>
              </span>
              <span tabindex="-1" class="has-tooltip button">
                right-top
                <span class="tooltip right-top"><u>Tooltip</u> will start at the bot tom of element.<br> <u>Lorem</u> ipsum dolor sit amet consectetur<br> adipisicing elit. Laborum mollitia iure,<br> perferendis adipisci quisquam, velit similique<br> sint ut saepe assumenda voluptatibus eos?<br> Cumque inventore nesciunt rem!<br> Dolorem iusto illum magnam.</span>
              </span>
            </span>
          </span>
        </td>
      </tr>
      <tr>
        <th>middle</th>
        <td data-th="left">
          <span>
            <span tabindex="-1" class="has-tooltip button">
              left-middle
              <span class="tooltip left-middle"><u>Tooltip</u> left middle<br>Lorem ipsum dolor sit amet</span>
            </span>
          </span>
        </td>
        <td>
            <img src="/img/logo/formir-64.png">
        </td>
        <td data-th="right">
          <span>
            <span tabindex="-1" class="has-tooltip button">
              right-middle
              <span class="tooltip right-middle">Lorem ipsum <br>dolor sit amet</span>
            </span>
          </span>
        </td>
      </tr>
      <tr>
        <th>bottom</th>
        <td data-th="left">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button">
                left-bottom
                <span class="tooltip left-bottom"><u>Tooltip</u> will start at the  top of element.<br>Lorem ipsum dolor sit amet consectetur adipisicing<br> elit. Laborum mollitia iure, perferendis adipisci quisquam,<br> velit similique sint ut saepe assumenda <br>voluptatibus eos? Cumque inventore nesciunt rem! Dolorem<br> iusto illum magnam.</span>
              </span>
              <span tabindex="-1" class="has-tooltip button">
                bottom
                <span class="tooltip bottom">Tooltip will start at bottom / right of element</span>
              </span>
            </span>
          </span>
        </td>
        <td data-th="center">
          <span>
            <span tabindex="-1" class="has-tooltip button">
              bottom-center
              <span class="tooltip bottom-center"><u>Tooltip</u> bottom center<br> Lorem ipsum dolor sit amet</span>
            </span>
          </span>
        </td>
        <td data-th="right">
          <span>
            <span class="button-group-horizontal">
              <span tabindex="-1" class="has-tooltip button">
                right-bottom
                <span class="tooltip right-bottom"><u>Tooltip</u> will start at the </span>
              </span>
              <span tabindex="-1" class="has-tooltip button">
                bottom-right
                <span class="tooltip bottom-right">Tooltip will start at bottom  / left of element</span>
              </span>
            </span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>

inside html, hoverable #

Example Code

	left	center	right
top	top-left (default) left-top	center-top	right (top) right-top
middle	left-middle		right-middle
bottom	left-bottom bottom	bottom-center	right-bottom bottom-right

					<table class="text-center table-mobile borders-horizontal">
  <thead>
    <tr>
      <th></th>
      <th>left</th>
      <th>center</th>
      <th>right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>top</th>
      <td data-th="left">
        <span>
          <span class="button-group-horizontal">
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Toolip will start at top / right of element">
              top-left (default)
            </span>
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Tooltip will start at the bot tom of element. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum mollitia iure, perferendis adipisci quisquam, velit similique sint ut saepe assumenda voluptatibus eos? Cumque inventore nesciunt rem! Dolorem iusto illum magnam.">
              left-top
            </span>
          </span>
        </span>
      </td>
      <td data-th="center">
        <span>
          <span tabindex="-1" class="has-tooltip button" data-tooltip="Tooltip at the center top">
            center-top
          </span>
        </span>
      </td>
      <td data-th="right">
        <span>
          <span class="button-group-horizontal">
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Toolip will start at top  / left of element">
              right (top)
            </span>
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Lorem Dolorem iusto illum magnam">
              right-top
            </span>
          </span>
        </span>
      </td>
    </tr>
    <tr>
      <th>middle</th>
      <td data-th="left">
        <span>
          <span tabindex="-1" class="has-tooltip button" data-tooltip="Lorem ipsum dolor sit amet">
            left-middle
          </span>
        </span>
      </td>
      <td>
          <img src="/img/logo/formir-64.png">
      </td>
      <td data-th="right">
        <span>
          <span tabindex="-1" class="has-tooltip button" data-tooltip="Lorem ipsum dolor sit amet">
            right-middle
          </span>
        </span>
      </td>
    </tr>
    <tr>
      <th>bottom</th>
      <td data-th="left">
        <span>
          <span class="button-group-horizontal">
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Lorem iusto illum magnam">
              left-bottom
            </span>
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Toolip will start at bottom / right of element">
              bottom
            </span>
          </span>
        </span>
      </td>
      <td data-th="center">
        <span>
          <span tabindex="-1" class="has-tooltip button" data-tooltip="Lorem ipsum dolor sit amet">
            bottom-center
          </span>
        </span>
      </td>
      <td data-th="right">
        <span>
          <span class="button-group-horizontal">
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Tooltip will start at the">
              right-bottom
            </span>
            <span tabindex="-1" class="has-tooltip button" data-tooltip="Toolip will start at bottom  / left of element">
              bottom-right
            </span>
          </span>
        </span>
      </td>
    </tr>
  </tbody>
</table>

Setup #

classes less/formir/setup/classes.less #

			@tooltip: tooltip;
@has-tooltip: has-tooltip;
@tooltip-bottom: bottom;
@tooltip-bottom-right: bottom-right;
@tooltip-bottom-center: bottom-center;
@tooltip-top: top;
@tooltip-top-right: right;
@tooltip-center: center;
@tooltip-right: right;
@tooltip-right-middle: right-middle;
@tooltip-left-middle: left-middle;
@tooltip-right-top: right-top;
@tooltip-right-bottom: right-bottom;
@tooltip-left-top: left-top;
@tooltip-left-bottom: left-bottom;
@tooltip-hoverable: hoverable; // tooltip not hide when try hover on it (arrow will be not work with data-tooltip)
@tooltip-hovered: hovered; // simulate :hover state to active tooltip manualy
@tooltip-absolute: absolute;
@tooltip-fixed: fixed;

variables less/formir/setup/variables.less #

			@tooltip-background: darken(@color-primary, 20%);
@tooltip-border-width: 0;
@tooltip-border-color: rgba(60, 60, 60, 1);
@tooltip-border: @tooltip-border-width solid @tooltip-border-color;
@tooltip-shadow: 0;
@tooltip-text-color: #fff;
@tooltip-font-size: 0.8rem;
@tooltip-line-height: 1.35em;
@tooltip-padding-vertical: 0.45rem;
@tooltip-padding-horizontal: 0.65rem;
@tooltip-max-width: 30rem;
@tooltip-width: max-content;  // Try not change this configuration
@tooltip-border-radius: 5px;
@tooltip-arrow-height: 5px;
@tooltip-arrow-width: @tooltip-arrow-height;
@tooltip-arrow-offset: 10px;
@tooltip-offset: @tooltip-arrow-offset;
@tooltip-distance: 5px;