CODEWITHSUNDEEP
javascripthtml
Proffesor
Proffesor

Reputation: 2619

Change how fast "title" attribute's tooltip appears

Is there a way to change how fast the tooltip from an element's "title" attribute? I'd like it if the tooltip appeared immediately, but it seems to take a few seconds to appear.

Upvotes: 207

Views: 120908

Answers (6)

Carson
Carson

Reputation: 8028

Unfortunately, there is no way to do this yet,

so I am using the following methods to help. (No dependencies required)

<style>
  [title] {
    position: relative;
  }

  [title]:after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: 100%; /* put it on the top */
    background-color: yellow;
    width: max-content;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
  }

  [title]:hover:after {
    opacity: 1;
  }
</style>

<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>

If you don't want the title to conflict with it, you can use data-* w3school.data-* help you, for example.

<style>
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 100%; /* put it on the top */
    background-color: yellow;
    width: max-content;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease-in-out;
  }

  [data-tooltip]:hover:after {
    opacity: 1;
  }

  div[data-tooltip]:after {
    left: 5px!important;
  }
</style>

<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>

below link may help you too.

Upvotes: 37

T30
T30

Reputation: 12222

Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.

If you want all the tooltips of your page to show immediately at hover, just use this:

$(document).tooltip({show: null});

Note that this applies to all elements that have a 'title' attribute. You can modify the selector to affect only a class, and set custom speed or effect:

$('.yourClass').tooltip({show: {effect:"none", delay:0}});

Upvotes: 21

Andrew
Andrew

Reputation: 1

TippyJS has a billion customization options.

Example TippyJS tooltip

https://atomiks.github.io/tippyjs

https://github.com/atomiks/tippyjs

Upvotes: 4

Darin Dimitrov
Darin Dimitrov

Reputation: 1038930

No, there's no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.

Mozilla's docs explain the limits and functionality well.

If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.

Upvotes: 96

centarix
centarix

Reputation: 508

You could use jqueryUI as suggested. An example of controlling the duration on the show property:

$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

Upvotes: 33

Slawomir Wdowka
Slawomir Wdowka

Reputation: 550

It isn't possible to change how fast default browser's tooltip appear, but you can use one of the tooltip plugins (here is few: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.

Upvotes: 7

Related Questions