CSS: Delay hide after :hover hide

Question

I try to use the approach for showing an HTML tooltip. I have already for some adaptions of the solution especially since the size didn't fit in properly. The working solution looks like

sup.footnote::after {
  content: attr(data-count);
}
sup.footnote:hover {
  cursor: help;
  position: relative;
}
sup.footnote cite {
  display: none;
}
sup.footnote:hover cite {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -50%;
  width: 250px;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
  overflow: hidden;
}
sup.footnote cite a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

<p> another line </p>
<p>
  Dies ist ein Beispiel für eine Fußnote in HTML
  <sup class="footnote" data-count="1">
    <cite>
      <span> [Sample span]</span>&nbsp;with some explanation:
      <a lang="en" href="http://test.gv.at/test.pdf">
        http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
      </a>
    </cite>
  </sup>
</p>
<p> another line </p>

In general this works quite good. My problem here is that depending on the entry of the mouse cursor the overlapping is too less. This causes the problem when trying to move the cursor into the displayed box the box vanishes before the cursor entered it.

In the demo the effect isn't that serious (try it from the left top corner). But in real life the hiding sux.

I tried several solutions with opacity. This one looks quite promising but I couldn't stich them together properly. I guess that's due to the fact that display:none is used.

Any idea what kind of CSS I should use to delay the hiding?

Answer 1

Scroll down for the final solution. But some notes about delay: You could use transition with duration and evtl. delay to control the display time. But note that you can't animate display. Therefore you can use opacity. For example:

cite {
  display: inline-block;
  opacity: 0;
  transition: opacity 300ms step-end 300ms;
}
sup:hover cite {
  opacity: 1
}

But in this case, you tooltip always exists in DOM. Invisible by opacity but display 'none' would remove it from DOM. (Test it with dev tools.)

You could use the transition to delay the tooltip, but if you want to use "display" you might think a bit differently.

Solution

Wrap the tooltip element and overlap with the sup element to avoid gaps between (keep hover).

sup.footnote::after {
  content: attr(data-count);
}

sup.footnote {
  cursor: help;
  position: relative;
}

sup.footnote .tooltip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;

  /* Toggle next line to see the hit box. */
  /* background-color: rgba(255, 255, 0, 0.5); */
}

sup.footnote:hover .tooltip {
  display: inline-block;
}

sup.footnote .tooltip cite {
  display: inline-block;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
  width: 250px;
  overflow: hidden;
}

sup.footnote .tooltip cite a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

<p>another line</p>
<p>
  Dies ist ein Beispiel für eine Fußnote in HTML
  <sup class="footnote" data-count="1">
    <span class="tooltip">
      <cite>
        <span> [Sample span]</span>&nbsp;with some explanation:
        <a lang="en" href="http://test.gv.at/test.pdf">
          http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
        </a>
      </cite>
    </span>
  </sup>
</p>
<p>another line</p>

See hit box:

You could also play with some padding around your hover element sup to reach the similar solution (overlapping / remove gap between elements).

Answer 2

You can achieve this with paddings in a pseudo class.

sup.footnote {
  position: relative;
}
sup.footnote::before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}

/* new style */
sup.footnote {
  position: relative;
}

sup.footnote::after {
  content: attr(data-count);
}


/* new style */
sup.footnote::before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}

sup.footnote:hover {
  cursor: help;
  position: relative;
}

sup.footnote cite {
  display: none;
}

sup.footnote:hover cite {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -20%; /* changed */
  width: 250px;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
  overflow: hidden;
}

sup.footnote cite a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

<p>another line</p>
<p>
  Dies ist ein Beispiel für eine Fußnote in HTML
  <sup class="footnote" data-count="1">
        <cite>
          <span> [Sample span]</span>&nbsp;with some explanation:
          <a lang="en" href="http://test.gv.at/test.pdf">
            http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
          </a>
        </cite>
      </sup> Dies ist ein Beispiel für eine Fußnote in HTML
</p>
<p>another line</p>