Smaller font size not fit tooltip arrow

I mean there have a big place:
https://jsfiddle.net/t16jpsLd/

How can fit to text size and remove that space vertically between a tag text and tooltip arrow?? I mean be on it on smaller font size like on bigger ones?

Is need something like line-height or no idea?

Thanks!

1 Like

Here’s a link to an article on making something that works like a tooltip. It’s not a native browse tooltip. compare your code.
https://tutorialzine.com/2014/07/css-inline-help-tips

@bestdesign notice the order of the css position top and right. I’m guessing you want the tooltip closer to the word.

Above code is also work fine with bigger font size that way is fit arrow on it…

As you see on normal font size is fit my problem with smaller font size.

https://jsfiddle.net/t16jpsLd/

You want the tooltip on the link with the smaller font to be closer to it? I guess one option might be to set the links to inline-block, give them a height and set line-height to zero, then set the line-height on the after pseudo element.

Not really sure if this does what you want?

.tooltip {
  display: inline-block;
  position: relative;
  line-height: 0;
  height: 10px;
}

.tooltip:hover:after {
  /* removed other css for brevity */
  line-height: 1;
}

https://jsfiddle.net/vw53tyo6/