jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<input type="text">
<i>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/1024px-Blue_question_mark_icon.svg.png" alt="Question mark" height="18" width="18">
</i>
<span class="tooltip">Lorem ipsum dolor</span>




<input type="text">
<i>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/1024px-Blue_question_mark_icon.svg.png" alt="Question mark" height="18" width="18">
</i>
<span class="tooltip">Lorem ipsum dolor</span>

CSS

.tooltip {
  background: #ededed;
  padding: 10px 10px 10px 0;
  border-radius: 2px;
  margin-left: 10px;
  font-size: 14px;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0, 0.25);
  // border-top: solid 3px #0A84CA;
}

.tooltip::before {
  content: "";
  width: 0; 
  height: 0;
  position: relative;
    top: -4px;
    left: -10px;
  font-size: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid #ededed;
}