Comments on: How to create Better Tooltips with plain JavaScript and CSS

By: Andrés Didier (Berta).

Andrés Didier (Berta). — Thu, 12 Nov 2020 16:29:40 +0000

OT: Delete previous messages. This is the final post, it didn't show correctly the data-title inside the HTML a tag (replaced it with another attribute). Sorry for the tests. Instead of creating a div with the tooltip class, you could replace it with a pseudo-tooltip made in CSS and a custom attribute. Save title value in data-title attribute without creating class or div. Example: HTML

<a href="example.com" data-title="Lorem Ipsum"> Link </a>

CSS

[data-title]: after {
  content: attr (data-title);
  position: absolute;
  bottom: -1.6em;
  left: 100%;
  background-color: black;
  color: white;
}

Could you try it? Greetings from Argentina and sorry for my English.

By: bryan

bryan — Fri, 14 Aug 2020 22:48:46 +0000

In reply to Jason Burnett. Hi, i am looking for ways to reposition the tooltip automatically. curious if you have found any? if on the right of the screen throw tip to the left, if on a small screen, make the tip more vertical, etc. as i type this, it seems css frameworks are the best way to do so, yet would still like to be able to detect the side of the screen on a desktop so the tool tip could be resized etc.

By: Jason Burnett

Jason Burnett — Wed, 06 May 2020 10:59:34 +0000

This only works so long as your link is far enough down to display the tooltip. What would be nice is to explain how to position the tooltip so that it is always on the screen. (i.e. under the link if it is at the top of the page).
Also, binding the events to the links themselves disallows new items to be added and also have their links created. Establishing a delegate for all tooltip events would likely be a better solution as it would allow future links with titles to also be handled by the improved tooltip appearance.
Thanks for the tutorial.

By: Blake

Blake — Mon, 16 Mar 2020 03:32:16 +0000

In reply to Fiddle. You could probably add an "onscroll" event listener that would update the tooltip position on scroll if you wanted to.

By: John Doe

John Doe — Wed, 22 Jan 2020 14:34:40 +0000

Thank you very much! Way better then any of all the jQuery plugins I’ve tried.

By: Michael Soriano

Michael Soriano — Fri, 01 Mar 2019 02:33:23 +0000

In reply to Kumar. That's so awesome Kumar!

By: Kumar

Kumar — Thu, 28 Feb 2019 20:06:58 +0000

awesome tutorial. Thank you. added some animations and word wrap to tooltips. demo codepen here : https://codepen.io/dagalti/pen/oVjKLR

By: Akanksha

Akanksha — Thu, 29 Nov 2018 00:46:24 +0000

Hi,
The tooltip’s position seems to be off. I came to this article looking for a way to fix the scroll issue for tooltips. Do you have a way you can recommend to fix the position of the tooltip popup with the element it is showed up on. Right now, if you make the browser small enough to have scrollbars, tooltips seemed fixed to their DOM position rather than the highlighted text’s position. Also is their a way to update the position based on browser’s view port?

By: Fiddle

Fiddle — Wed, 17 Oct 2018 13:57:37 +0000

If the page has been scrolled, the tooltip shows up offset from the link. In other words, the tooltip seems to be anchored to the links original position. This is true in Safari, Firefox, and Chrome. Don’t know about windows only browsers. You can see for yourself here: https://codepen.io/alihesari/pen/jagGOr Just make your window small enough that the text at the bottom can be scrolled and watch what happens with the tooltip.

By: tiffany

tiffany — Wed, 09 May 2018 04:41:37 +0000

In reply to Maryam. nice article