Hybreeder Hybreeder - 3 months ago 16
CSS Question

How to tooltip keep active using HTML and CSS or Jquery?

I have to display tooltip without hover and clicked.This is example which i am using for keep open tooltip without hover or click but its not working.It displaying on hover.Would you please help me in this?

Html

<span class="field-tip">
Keep open tooltip
<span class="tip-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tellus ac lectus porta volutpat. </span>
</span>


Css

/* Hover tooltips */
.field-tip {
position:relative;
}
.field-tip .tip-content {
position:absolute;
top:-10px;
right:9999px;
width:200px;
margin-right:-220px;
padding:10px;
color:#000;
background:#F9E79F;
opacity:0;
-webkit-transition:opacity 250ms ease-out;
-moz-transition:opacity 250ms ease-out;
-ms-transition:opacity 250ms ease-out;
-o-transition:opacity 250ms ease-out;
transition:opacity 250ms ease-out;
border-radius: 10px;
}

.field-tip .tip-content:before {
content:' ';
position:absolute;
top:50%;
left:-16px;
width:0;
height:0;
margin-top:-8px;
border:8px solid transparent;
border-right-color:#F9E79F;
}
.field-tip:hover .tip-content {
right:-20px;
opacity:1;
}

Answer

.field-tip {
  position: relative;
}
.field-tip .tip-content {
  position: absolute;
  top: -10px;
  right: 9999px;
  width: 200px;
  margin-right: -220px;
  padding: 10px;
  color: #000;
  background: #F9E79F;
  opacity: 0;
  -webkit-transition: opacity 250ms ease-out;
  -moz-transition: opacity 250ms ease-out;
  -ms-transition: opacity 250ms ease-out;
  -o-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
  border-radius: 10px;
}
.field-tip .tip-content:before {
  content: ' ';
  position: absolute;
  top: 50%;
  left: -16px;
  width: 0;
  height: 0;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: #F9E79F;
}
.field-tip .tip-content {
  right: -20px;
  opacity: 1;
}
<span class="field-tip">
 Keep open tooltip
<span class="tip-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tellus ac lectus porta volutpat. </span>
</span>

  1. Use .field-tip .tip-content { right: -20px; opacity: 1; } remove :hover
Comments