Perfect Tooltip Positioning with CSS or JS

[edarioq]

I am creating a tooltip for a web app using just CSS. So far I’ve got a pretty handy tooltip going with the following classes:

• tooltip-up
• tooltip-down
• tooltip-left
• tooltip-right

The difference with each is the arrow and the animation. The class ‘tooltip-right’ for example has the arrow towards the left side and it animated from the left, towards the right.

The issue comes when the tooltip has lots of text, the tooltip-left, -right, and -up all position differently when there is lots of text in the tooltip. Tooltip down has no issues because everything wraps downward by default.

So my question is, is it possible to perfectly position the tooltip with just CSS. Or will some JS be involved, if so, what do you suggest to do? Maybe add check to see how much text a tooltip has and add some inline css for margin? As an example, I was trying to replicate http://foundation.zurb.com/sites/docs/v/5.5.3/components/tooltips.html, we are using foundation but there seems to be some issue with it and Angular.

Here’s some code I have so far:

  .tooltip-up,
  .tooltip-down,
  .tooltip-left,
  .tooltip-right {
    font-size: 12px;
    position: absolute;
    text-align: center!important;
    visibility: hidden;
    background-color: rgba($gray, 0.99);
    color: #fff;
    text-align: left;
    border-radius: 3px;
    width: 250px;
    height: auto;
    padding: 7px 10px;
    z-index: 1;
    opacity: 0;
    box-shadow: 0 2px 5px 0 rgba($solid-black, 0.16), 0 2px 10px 0 rgba($solid-black, 0.12);
    @include transition (.2s ease-in);
  }

  .tooltip-right {
    top: -35%;
    left: 135%;
    transform: translateX(-15%);
    margin-top: -10px;

    &:after {
      border-right: 7px solid rgba($gray, 0.99);
      border-bottom: 7px solid transparent;
      border-top: 7px solid transparent;
      top: 50%;
      content: " ";
      height: 0;
      left: -7px;
      position: absolute;
      width: 0;
      transform: translateY(-50%);
    }

  }

Please keep in mind that there are four tooltip classes, so your solution must take into account the tool tip left, right, and top as well. Thanks for any info and help beforehand.

[Author]

Posts