CSS - Tooltips

Basic Tooltip Syntax

To create a basic tooltip using CSS, you need to set up the correct HTML structure and apply the necessary CSS properties. The HTML structure consists of a container element that holds the target element (the element that triggers the tooltip) and the tooltip itself.

<div class="tooltip-container">
  <span class="tooltip-target">Hover over me!</span>
  <span class="tooltip-text">I'm a tooltip!</span>
</div>

The <div> element with the class tooltip-container acts as the container for the tooltip. The target element is a <span> with the class tooltip-target, and the tooltip text is placed inside another <span> with the class tooltip-text.

To style the tooltip using CSS, you need to apply the following properties:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-target {
  cursor: pointer;
}

.tooltip-text {
  display: none;
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1;
}

.tooltip-container:hover .tooltip-text {
  display: block;
}

The .tooltip-container class sets the positioning context for the tooltip. The .tooltip-target class applies a pointer cursor to indicate interactivity. The .tooltip-text class hides the tooltip and positions it absolutely. When the .tooltip-container is hovered over, the .tooltip-text becomes visible using the :hover pseudo-class and the display: block; property.

You can further customize the styles of the tooltip, such as changing the background color, text color, padding, and border radius, to match your desired design.

Positioning Tooltips

When creating tooltips, you can position them in different places relative to the target element. The most common positioning options are top, bottom, left, and right. By using CSS, you can control the placement of tooltips.

To position a tooltip, use the position property with the value absolute on the tooltip element. Then, use the top, bottom, left, and right properties to specify the distance from the target element.

.tooltip-text {
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}

.tooltip-text {
  top: 125%;
  left: 50%;
  margin-left: -60px;
}

.tooltip-text {
  right: 105%;
  top: 50%;
  margin-top: -15px;
}

.tooltip-text {
  left: 105%;
  top: 50%;
  margin-top: -15px;
}

In each example, the percentage values for top, bottom, left, and right properties are relative to the size of the target element. The negative margin values are used to center the tooltip either horizontally or vertically, depending on the positioning.

Adjust the values based on the size of your tooltip and the desired spacing between the tooltip and the target element.

Customizing Tooltip Appearance

When creating tooltips, you can customize their appearance to match your website's design or to make them stand out. CSS provides properties that allow you to change the background color, text color, font, borders, padding, and other styling aspects of tooltips.

To change the background color and text color of a tooltip, you can use the background-color and color properties:

.tooltip-text {
  background-color: #000;
  color: #fff;
}

To change the font of the tooltip text, you can use font properties such as font-family, font-size, and font-weight:

.tooltip-text {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

To add borders to the tooltip, you can use the border property. You can set the border width, style, and color:

.tooltip-text {
  border: 1px solid #ccc;
}

Padding can be added to the tooltip using the padding property to create space between the tooltip text and its borders. You can set padding values for all sides or set different values for each side (top, right, bottom, left):

.tooltip-text {
  padding: 5px 10px;
}

You can also apply other styling properties to tooltips, such as border-radius to create rounded corners, box-shadow to add a shadow effect, or text-transform to change the capitalization of the tooltip text.

.tooltip-text {
  background-color: #f9f9f9;
  color: #333;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

Feel free to experiment with different CSS properties and values to create tooltips that match your design preferences and requirements.

Advanced Tooltip Techniques

In this section, you will learn some advanced techniques for creating tooltips, including animated tooltips and responsive tooltips.

.tooltip-text {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tooltip-container:hover .tooltip-text {
  opacity: 1;
}

@keyframes tooltipFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tooltip-text {
  opacity: 0;
  animation: tooltipFadeIn 0.3s ease-in-out forwards;
}

.tooltip-text {
  font-size: 14px;
  padding: 5px;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .tooltip-text {
    font-size: 12px;
    padding: 3px;
    white-space: normal;
  }
}

.tooltip-text {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .tooltip-text {
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}