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.

you need to add some js. https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers — Aslam, Jan 09 '17 at 06:03
You can do it but the approach might be different. Read here http://stackoverflow.com/questions/21993661/css-auto-hide-elements-after-5-seconds — Aslam, Jan 09 '17 at 06:09
You could try it with `opacity` and `transition`, but I think thats not what you're searching for. Example here: https://jsfiddle.net/3zaz28L6/ — Patrick Mlr, Jan 09 '17 at 06:19
@hunzaboy yea this isn't really what I'm looking for, visibility and opacity are not very helpful for me... thanks for the research though! — user3050478, Jan 09 '17 at 06:25

score 2 · Answer 1 · answered Jan 09 '17 at 06:51

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/

Chris Happy · Accepted Answer · 2017-01-09T06:49:41.590

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)

Hi @ChrisHappy, I tested it and it did fade after 5 seconds, but what if the span has other attributes such as `position: absolute;`, borders, backgrounds, etc... Should I add `transation` to them aswell? — user3050478, Jan 09 '17 at 06:34

score 1 · Answer 3 · edited Feb 01 '17 at 17:59

1

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>

edited Feb 01 '17 at 17:59

marc_s

732,580
175
1,330
1,459

answered Jan 09 '17 at 06:10

Prasad Gayan

1,424
17
26

1

You need to give only css based solution – Super User Jan 09 '17 at 06:26

score 0 · Answer 4 · answered Jan 09 '17 at 07:29

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;}
}

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

4 Answers4