Tooltip Box With Arrow In Css

Creating interactive and informative user interfaces often involves the use of tooltips. This tutorial will guide you through the process of creating a Tooltip Box With Arrow In Css, enhancing your web development skills and enabling you to add helpful contextual information to your websites.

Setting Up the HTML Structure

This step involves creating the basic HTML structure for your tooltip boxes. Each tooltip will be a `div` element with the class “tooltip” and an additional class specifying its position (top, right, left, bottom).

<div class="tooltip top" style="--c: #79bd9a;">This is a simple Tooltip with a solid coloration and without border radius </div>
<div class="tooltip right" style="--c: #8a9b0f;">This is a simple Tooltip with a solid coloration and without border radius </div>
<div class="tooltip left" style="--c: #eb6841;">This is a simple Tooltip with a solid coloration and without border radius </div>
<div class="tooltip bottom">This is a simple Tooltip with a solid coloration and without border radius </div>

Styling the Tooltip with CSS

Here, we define the CSS styles to create the tooltip appearance, including the arrow. The `clip-path` property is used to create the arrow shape.

.tooltip {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height*/

  border-image: fill 0//var(--h)
    conic-gradient(var(--c,#CC333F) 0 0); 
}
.bottom {
  clip-path: 
    polygon(0 100%,0 0,100% 0,100% 100%,
      calc(50% + var(--b)/2) 100%,
      50% calc(100% + var(--h)),
      calc(50% - var(--b)/2) 100%);
}
.top {
  clip-path: 
    polygon(0 0,0 100%,100% 100%,100% 0,
      calc(50% + var(--b)/2) 0,
      50% calc(-1*var(--h)),
      calc(50% - var(--b)/2) 0);
}
.right {
  clip-path: 
    polygon(100% 100%,0 100%,0 0,100% 0,
      100% calc(50% - var(--b)/2),
      calc(100% + var(--h)) 50%,
      100% calc(50% + var(--b)/2));
}
.left {
  clip-path: 
    polygon(0 100%,100% 100%,100% 0,0 0,
      0 calc(50% - var(--b)/2),
      calc(-1*var(--h)) 50%,
      0 calc(50% + var(--b)/2));
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-template-columns: auto auto;
  gap: 30px;
  text-align: center;
  background: #f2f2f2;
}
.tooltip {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  font-family: sans-serif;
  padding: 1em;
  max-width: 25ch;
}

Adding Header Assets

Include any necessary header assets, such as CDN links for fonts or CSS libraries, in this section.

Adding Footer Assets

Include any necessary footer assets, such as CDN links for JavaScript libraries, in this section.

In conclusion, by following this tutorial, you have learned how to create a visually appealing and functional tooltip box with an arrow using CSS. This technique can be used to enhance the user experience on your websites by providing helpful and informative tooltips.