Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Perfect Tooltip Positioning with CSS or JS

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #249605
    edarioq
    Participant

    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.

    enter image description here

    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.

    enter image description here

    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.

Viewing 1 post (of 1 total)
  • The forum ‘Design’ is closed to new topics and replies.