Leave tooltip visible without hovering

Navigation
1

I want the tooltip to appear as soon as you load the page, other than the hover effect. 

[class*="tooltip"]{
    position:relative;
    text-decoration:none;
}
[class*="tooltip"]:after,[class*="tooltip"]:before{
    position:absolute;
    z-index:100;
    opacity:0;
}
[class*="tooltip"]:after{
    box-shadow:0 0 5px 0 rgba(0,0,0,0.3);
    content:attr(aria-label);
    height:25px;
    line-height:25px;
    padding:0 10px;
    font-size:1.2rem;
    text-align:center;
    color:#fff;
    background:#222;
    border-radius:4px;
    text-shadow:0 0 5px #000;
    white-space:nowrap
}
[class*="tooltip"]:before{
    content:'';
    width:0;
    height:0;
    border-width:6px;
    border-style:solid
}
[class*="tooltip"]:hover:after,[class*="tooltip"]:focus:after,[class*="tooltip"]:hover:before,[class*="tooltip"]:focus:before{
    opacity:1
}
/* tooltip-top */
.tooltip-top:after,.tooltip-top:before{

    transition:bottom .25s ease-in-out;
    bottom:90%;
    left:-9999px;
    margin-bottom:12px
}
.tooltip-top:before{
    border-color:#222 transparent transparent transparent;
    margin-bottom:0
}
.tooltip-top:hover:after,.tooltip-top:focus:after,.tooltip-top:hover:before,.tooltip-top:focus:before{
    bottom:85%;
    left:0;

}
.tooltip-top:hover:before,.tooltip-top:focus:before{
    left:15px
}
<a href="#component-tooltip" role="tooltip" class="tooltip-top btn" aria-label="Explore inadimplência por empreeendimentos">Top</a>
    
asked by anonymous 02.01.2019 / 13:22

1 answer

0

To let the tooltipe arrow appear all the time you can roughly remove the pseudo-class :hover of the classes that have it as Anderson said, or you can refine the CSS by putting the styles that were in the pseudo-class :hover direct in the element's original class.

To make the arrow disappear after a certain time, you just have to do a @keyframes in the css, and put in that animation a delay of 3s or 5s as you want animation-delay: 3s; . I left the comments in the code.

See the example, the arrow disappears after 3s 

[class*="tooltip"]{
  position:relative;
  text-decoration:none;
}
[class*="tooltip"]:after,[class*="tooltip"]:before{
  position:absolute;
  z-index:100;
  opacity:1;
  transition:bottom .25s ease-in-out;
  bottom:90%;
  left:-9999px;
  margin-bottom:12px;
  /* coloca a animação no elemento */
  animation: fadeOut 200ms linear forwards;
  /* tempo que demora pra animação começar */
  animation-delay: 3s;
}
[class*="tooltip"]:after{
  content:attr(aria-label);
  box-shadow:0 0 5px 0 rgba(0,0,0,0.3);
  height:25px;
  line-height:25px;
  padding:0 10px;
  font-size:1.2rem;
  text-align:center;
  color:#fff;
  background:#222;
  border-radius:4px;
  text-shadow:0 0 5px #000;
  white-space:nowrap
}
[class*="tooltip"]:before{
  content:'';
  width:0;
  height:0;
  border-width:6px;
  border-style:solid;
  left:15px;
  border-color:#222 transparent transparent transparent;
  margin-bottom:0;
}
<a href="#component-tooltip" role="tooltip" class="tooltip-top btn" aria-label="Explore inadimplência por empreeendimentos">Top</a>
    
02.01.2019 / 13:49
jpgraph empty square php line chart [closed] Accessing private property with decorator in typescript