Show hidden div on :hover, and make div stay visible for 5 seconds after mouseout on CSS / CSS3

Question

I have the following div on my html page:

<div class="tooltip">
    <span>content</span>
</div>

And the following css script:

.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:inline;
}

Is there a way to make the span stay visible for more 5 seconds after the mouse is out of the div? The reason I'm trying to do this is because this tooltip has some content inside it such as links.

Answer 1

PURE CSS

Sorry, I forgot. Display doesn't get affected by transitions.

Use opacity instead.

Use transitions:

.tooltip span {
    opacity: 0;
    transition: opacity 0s 1s;
}
.tooltip:hover span {
    opacity: 1;
    transition: opacity 0s;
}

.tooltip span {
  opacity: 0;
  transition: opacity 0s 5s;
}

.tooltip:hover span {
  opacity: 1;
  transition: opacity 0s;
}

<div class="tooltip">
  <span>content</span>
</div>

If you want it to fade out, use this:

.tooltip span {
    opacity: 0;
    transition: opacity 0s 5s;
}
.tooltip:hover span {
    opacity: 1;
    transition: opacity 0s;
}

.tooltip span {
  opacity: 0;
  border: 1px solid transparent;
  transition: all .4s 4.6s;
}

.tooltip:hover span {
  opacity: 1;
  border: 1px solid #000;
  opacity: 1;
  transition: all .4s;
}

<div class="tooltip">
  <span>content</span>
</div>

UPDATE use all if you have multiple properties. Note: you generally need have an initial property and a changed property. E.g. See JSFiddle (working)

Answer 2

Pure css. This isn't perfect. Try this.

.tooltip span {
    //display:none;
    display: block;
}
.tooltip:hover span {
    //display:inline;
    -webkit-animation: opacity1 0.1s 1 forwards;
    animation: opacity1 0.1s 1 forwards;
}

.tooltip:not(:hover) span{
  -webkit-animation: opacity0 0.1s 1 forwards;
    animation: opacity0 0.1s 1 forwards;
    -webkit-animation-delay: 5s;
    animation-delay: 5s; 
}

@-webkit-keyframes opacity1 {
    to {opacity: 1; height: auto; width: auto;}
}
@keyframes opacity1 {
    to {opacity: 1; height: auto; width: auto;}
}

@-webkit-keyframes opacity0 {
    to {opacity: 0; height: 0; width: 0;}
}
@keyframes opacity0 {
    to {opacity: 0; height: 0; width: 0;}
}

Answer 3

jQuery solution:

$( ".tooltip" ).mouseover(function() {
   $('.tooltip span').show();
  setTimeout(function(){
    $('.tooltip span').hide('slow', function(){
 });// or fade, css display however you'd like.
}, 5000); // set visible time
});

.tooltip span {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="tooltip">
  tooltip
    <span>content</span>
</div>

Answer 4

Here is my attempt!

HTML

<div class="tooltip">
  Title
  <span> - content</span>
</div>

CSS

.tooltip span {
  visibility: hidden;
}

.tooltip:hover span {
  visibility: visible;
}

.tooltip span:not(:hover) {
  visiblity: hidden;
  transition: visibility 5s;
}

JSFiddle: https://jsfiddle.net/mpx3m1v4/