I was wondering if there was any way to delay just the classic HTML tooltip (no jQuery plugins like qTip, please). It's just a button as:

<input type="button" title="Click" value="My Button">

I want to know if there is any way to delay the title using pure JavaScript or client-side scripting. From what I have researched, it doesn't seem possible as it is part of the actual OS' GUI programming, which is impossible to access via browser scripting, but if there is any way that I just haven't come across yet, I would love to know! Thanks!

I was wondering if there was any way to delay just the classic HTML tooltip (no jQuery plugins like qTip, please). It's just a button as:

<input type="button" title="Click" value="My Button">

I want to know if there is any way to delay the title using pure JavaScript or client-side scripting. From what I have researched, it doesn't seem possible as it is part of the actual OS' GUI programming, which is impossible to access via browser scripting, but if there is any way that I just haven't come across yet, I would love to know! Thanks!

• javascript
• html
• css
• tooltip
• delay

• possible duplicate of Change how fast "title" attribute's tooltip appears – Dave Jarvis Commented Oct 10, 2014 at 18:44

3 Answers 3

The browser controls the tool tip. If you want to make any changes you will have to create your own. Maybe by using the plug ins your refered to.

I'm 7+ years late, but just stumbled across the same desire and wrote a simple solution to delay tooltips using CSS.

Simply use transition-delay or animation keyframes for opacity. While the transition-delay is easiest, it has the trouble of delaying both reactions in and out of hover, afaik. Animation bypasses that and will only delay the start, for example:

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
}


/* Tooltip text */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #444;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 105%;
  opacity: 1;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #545 transparent transparent;
}


/*this is the IMPORTANT bit: hover with animation*/

.tooltip:hover .tooltiptext {
  visibility: visible;
  animation: tooltipkeys 1s 1; //here just change the 1s to you desired delay time!
  opacity: 1;
}

@-webkit-keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tooltipkeys {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="tooltip"><span class="tooltiptext">delayed tip</span>Example</div>

For more tips on tooltips you should check w3 schools for plenty of good advice.

This is a feature of the system which you cannot manipulate with HTML, CSS or JavaScript.
Keep in mind that different Operating Systems have different set of delays and styling to these tooltips, the best option to consider for better control (delay,styling,animation,etc) would be to implement your own tooltip.