interest-delay-end CSS property

Syntax

/* Keyword or custom delay */
interest-delay-end: normal;
interest-delay-end: 2s;
interest-delay-end: 250ms;

/* Global values */
interest-delay-end: inherit;
interest-delay-end: initial;
interest-delay-end: revert;
interest-delay-end: revert-layer;
interest-delay-end: unset;

Values

This property is specified as one <time> value or the keyword normal:

normal

Sets the delay to the browser's default delay. This is the initial value.

<time>

Sets the delay to a specific duration. The value must be positive, otherwise the property becomes invalid.

Formal definition

Formal syntax

interest-delay-end = 
  normal  |
  <time>  

Examples

Creating a basic interest-delay-end effect

In this example, we demonstrate how interest-delay-end affects interest invoker behavior.

HTML

The markup includes a <button>, a <p>, and an <input> of type checkbox. We specify the <button> as an interest invoker by giving it the interestfor attribute, whose value matches the id of the <p> element. This makes the paragraph the target element. The paragraph is turned into a popover by giving it the popover attribute, which hides it initially.

<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>Hover tooltip</p>
<form>
  <input type="checkbox" id="apply-delay" />
  <label for="apply-delay">
    Apply an <code>interest-delay-end</code> of <code>2s</code>
  </label>
</form>

CSS

In the CSS, we specify a rule with a .delay selector that applies an interest-delay-end value of 2s to any interest invoker the delay class is set on. We will set this on the <button> when the checkbox is checked using JavaScript.

.delay {
  interest-delay-end: 2s;
}

JavaScript

In our script, we get references to the <button> and the checkbox, then create an event listener that toggles the delay class on the <button> whenever the checkbox value changes (when it is checked or unchecked).

const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
  btn.classList.toggle("delay");
});

Result

This renders as follows:

Try showing interest in the button (for example, by hovering or focusing it) and then losing interest to observe the popover showing and hiding. By default, the popover shows and hides after a very short delay.

Now check the checkbox and try the same actions again. This time, the delay between showing interest and the popover appearing is unaffected, but the delay between losing interest and the popover disappearing should be increased to 2s.

Specifications

Browser compatibility

See also

• interest-delay-start, interest-delay
• Popover API
• Using interest invokers
• CSS basic user interface module