Make the tooltip visible without being in the Hover

Asked

Viewed 129 times

1

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

[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>

css css3 css-hover

  • The effect of Hover is given by the selector :hover. Try to remove it or replace it in your code.

  • it worked! I think now I can set in the tooltip-top class after about 5 seconds it disappear using setTimeout, right? http://jsfiddle.net/aq9Laaew/303453/

  • Tatah doesn’t need this, makes a @keyframes and a fadeOut animation with delay of 5s in the animation... If you want I can post this option as response

  • 1

    @hugocsl I accept the option, to help me

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 original element class.

To make the arrow disappears after a certain time just you make a @keyframes in css, and put in this animation a delay of 3s or 5s as you wish 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>

  • thank you so much :)

  • @tatah just edited the code this second :D, I took the opportunity to remove the redundant classes since you don’t need :Hover, if you want the old code, just enter the Edit history and get the other code that only removed :Hover ok, just click on the "edited" link up there. Good luck there, when doubt just give the touch.

Browser other questions tagged css css3 css-hover

You are not signed in. Login or sign up in order to post.