Mastering Tooltip Placement Using CSS or JavaScript

Question

Mastering Tooltip Placement Using CSS or JavaScript

I have been working on creating a CSS-only tooltip for a web application and so far I have managed to create some useful tooltips with different classes:

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

The distinguishing factors between them are the arrow direction and animation. For instance, the 'tooltip-right' class has the arrow pointing towards the left side and animates from left to right.

https://i.sstatic.net/qRapm.png

An issue arises when the tooltip contains a lot of text; the positioning differs for tooltip-left, tooltip-right, and tooltip-up due to the varying text length. Tooltip-down does not face any issues as everything naturally flows downwards by default.

https://i.sstatic.net/ZF84c.png

Hence, my question is whether it is feasible to precisely position the tooltip using only CSS. Or would JavaScript be necessary? If so, what approach would you recommend? Perhaps checking the text length in the tooltip and adding inline CSS for margins? As an example, I tried emulating Foundation Tooltips. We are utilizing Foundation but encountering compatibility issues with Angular.

Here's a snippet of code that I have implemented:

  .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 note that there are four tooltip classes, so any solution should consider all positions (left, right, top). Thank you in advance for any advice or assistance provided.

javascript css tooltip

Answer 1

Answer №1

To center the tooltip arrow, you can utilize a simple trick: apply translateY(-50%) along with position: absolute and top: 50%.

By setting the value to 50%, the arrow will always be positioned in the center relative to the tooltip itself. However, there are a couple of things to watch out for:

Make sure not to translate the tooltip completely out of view.
Sometimes, text may appear blurry if the height is an odd pixel size (e.g., using 27px could move the tooltip 13.5px down).

p { display: inline-block; position: relative; border: 1px solid blue; }

.tooltip-center {
  box-sizing: border-box;
  font-size: 14px;
  position: absolute;
  text-align: center;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  width: 300px;
  padding: 10px 15px;
  z-index: 2;
  opacity: .9;

  top: 50%;
  left: 0;
  /* width + arrow width = 300 + 10 = 310 */
  transform: translate3d(310px, -50%, 0);
}

.tooltip-center::after {
  content: "";

  border-right: 10px solid #333;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;

  position: absolute;
  height: 0;
  width: 0;
  right: -10px;
  top: 50%;

  transform: translateY(-50%);
}

<h3>Applying translateY for accurate positioning</h3>
<p>
  <span>
    Lorem ipsum dolor
  </span>
  <span class="tooltip-center">
    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.
  </span>
</p>

Answer 2

To center the tooltip arrow, you can utilize a simple trick: apply translateY(-50%) along with position: absolute and top: 50%.

By setting the value to 50%, the arrow will always be positioned in the center relative to the tooltip itself. However, there are a couple of things to watch out for:

Make sure not to translate the tooltip completely out of view.
Sometimes, text may appear blurry if the height is an odd pixel size (e.g., using 27px could move the tooltip 13.5px down).

p { display: inline-block; position: relative; border: 1px solid blue; }

.tooltip-center {
  box-sizing: border-box;
  font-size: 14px;
  position: absolute;
  text-align: center;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  width: 300px;
  padding: 10px 15px;
  z-index: 2;
  opacity: .9;

  top: 50%;
  left: 0;
  /* width + arrow width = 300 + 10 = 310 */
  transform: translate3d(310px, -50%, 0);
}

.tooltip-center::after {
  content: "";

  border-right: 10px solid #333;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;

  position: absolute;
  height: 0;
  width: 0;
  right: -10px;
  top: 50%;

  transform: translateY(-50%);
}

<h3>Applying translateY for accurate positioning</h3>
<p>
  <span>
    Lorem ipsum dolor
  </span>
  <span class="tooltip-center">
    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.
  </span>
</p>

Answer 3

Answer №2

Attempt:

.info-box,
.info-bubble,
.info-popover,
.info-tooltip {
    font-size: 12px; /* Consider using the em unit for better scalability */
    position: absolute;
    text-align: center!important; /* Why the use of !important here? */
    visibility: hidden; /* Perhaps remove this line since opacity is set to 0 */
    background-color: rgba($grey, 0.99);
    color: #fff;
    text-align: left; /* Can be removed */
    border-radius: 3px;
    width: 250px; /* Evaluate using the em unit instead */
    height: auto; /* Default value can apply, so this line may not be necessary */
    padding: 7px 10px; /* The em unit might be a better choice here */
    z-index: 1; /* Set it higher than other elements in your code */
    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);
}

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

&:after {
    border-right: 7px solid rgba($grey, 0.99);
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    top: 1em; /* Experiment with what works best, avoiding % as it may cause arrow misalignment with lengthy text */
    content: "";
    height: 0;
    left: -7px;
    position: absolute;
    width: 0;
    transform: translateY(-50%);
}

}

Answer 4

Attempt:

.info-box,
.info-bubble,
.info-popover,
.info-tooltip {
    font-size: 12px; /* Consider using the em unit for better scalability */
    position: absolute;
    text-align: center!important; /* Why the use of !important here? */
    visibility: hidden; /* Perhaps remove this line since opacity is set to 0 */
    background-color: rgba($grey, 0.99);
    color: #fff;
    text-align: left; /* Can be removed */
    border-radius: 3px;
    width: 250px; /* Evaluate using the em unit instead */
    height: auto; /* Default value can apply, so this line may not be necessary */
    padding: 7px 10px; /* The em unit might be a better choice here */
    z-index: 1; /* Set it higher than other elements in your code */
    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);
}

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

&:after {
    border-right: 7px solid rgba($grey, 0.99);
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    top: 1em; /* Experiment with what works best, avoiding % as it may cause arrow misalignment with lengthy text */
    content: "";
    height: 0;
    left: -7px;
    position: absolute;
    width: 0;
    transform: translateY(-50%);
}

}

Mastering Tooltip Placement Using CSS or JavaScript

Answer №1

Answer №2

Similar questions

Enforce a limit of two decimal places on input fields using jQuery

Configuring IP Whitelisting for Firebase Cloud Functions with MongoDB Cluster

Include brand logo to the Bootstrap navigation bar

The console.log() function does not accurately display the true value

Sticky header and a sidebar gallery with consistently sized thumbnails

What is the best way to hide or eliminate spinners/arrows in react-select?

The event.currentTarget's attempt to toggle the class of the child element is not functioning as

Ensuring complete height and width with no scrollbar in a Material UI React application

Exploring the interactive doughnut graph using SVG and Vue.js

What sets apart elevation from z-index in material-ui?

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

What is the best way to create a nested match using regex?

Amazon Banner Integration for Angular Version 4

Using Jquery, take out each parent element and duplicate the child element

Javascript function that triggers at the end of a time update

Take off the wrapping from the package

Modifying an element in an array while preserving its original position

Error: Unable to cast value "undefined" to an ObjectId for the "_id" field in the "User" model

Include the url of the html file in your JavaScript code

What is the best way to integrate a vh property instead of px for a scrolling navigation using jQuery?