tooltip Archives - Lena Design

CSS tooltips are often used to define extra information about something when the user hovers over an element.

To create a CSS Tooltip follow the steps below:

Hover over the bold text:

HTMLHyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as CSSCascading Style Sheets and scripting languages such as JavaScriptProgramming language.

Step1.

Add HTML

Add your text and mark the parts that you want to give extra information:

<p><b class="one">HTML<span class="text-1">HyperText Markup Language</span></b> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as <b class="two">CSS<span class="text-2">Cascading Style Sheets</span></b> and scripting languages such as <b class="three">JavaScript<span class="text-3">Programming language</span></b>.</p>

Step2.

Add CSS

Style the text:

p {
  width:30%;
  font-size: 20px;
  text-align: justify;
}

Create the tooltip with an arrow on the bottom:

.one, .two, .three {
  position: relative;
  display: inline-block;
}
.one .text-1 {
  opacity: 0;
  width: 230px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  font-size:15px;
  z-index: 1;
  bottom: 150%;
  left: -55%;
  margin-left: -60px;
  transition: opacity .5s;
}

.one .text-1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.one:hover .text-1 {
  opacity: 1;
}

Create the tooltip with an arrow on the left:

.two .text-2 {
  opacity: 0;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 130%;
  font-size:15px;
  transition: opacity .5s;
}

.two .text-2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.two:hover .text-2 {
  opacity: 1;
}

Create the tooltip with an arrow on the top:

.three .text-3 {
  width: 190px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  font-size: 15px;
  z-index: 1;
  top: 150%;
  left: 15%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity .5s;
}

.three .text-3::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.three:hover .text-3 {
  opacity: 1;
}

Enjoy coding!