1+ Tooltip Components - Vanilla CSS

Vanilla CSS tooltip components are simple and lightweight elements that you can add to your website to provide additional information or context when users hover over specific elements. These tooltips are created using pure CSS, without the need for external libraries or frameworks. In this collection, you'll find various designs for tooltips that you can easily incorporate into your website's design. Whether you prefer basic tooltips or more visually appealing styles, these Vanilla CSS tooltip components are designed to improve user interaction and provide a seamless browsing experience for your website visitors.

Simple Tooltip

Discover the simplicity of Tooltip implementation using HTML and Pure CSS, perfect for adding informative tooltips to your website without JavaScript dependencies.

Author: Admin

Preview
Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind Simple Checkbox</title>
    <link rel="preconnect" href="https://www.frontendcomponent.com" />
    <link
      rel="stylesheet"
      href="https://www.frontendcomponent.com/fonts/inter.css"
    />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="demo">
      <p><a href="#" data-tooltip="I am a tooltip!">I have a tooltip.</a></p>
  </body>
</html>

body {
  margin: 64px auto;
  text-align: center;
  font-size: 100%;
  max-width: 640px;
  width: 94%;
}

a:hover {
  text-decoration: none;
}

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

```
No need of JavaScript
```