Smaller font size not fit tooltip arrow

HTML-CSS
1

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
2

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.

3

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

4

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

https://jsfiddle.net/t16jpsLd/

5

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/