tippyjs icon indicating copy to clipboard operation
tippyjs copied to clipboard

Published 20 hours ago • verified publisher icon atomiks

border.css: CSS arrow border

Open strarsis opened this issue 4 years ago • 5 comments

Bug description

When using the helper style border.css the CSS arrows don't get a second pseudoelement for the arrow border. This means that while the tooltip has a border, but the arrow has no border. This is solved differently with the SVG arrow, where two SVG arrows are used in the example.

strarsis avatar Feb 14 '21 11:02 strarsis

The regular CSS arrows should have a border with that sheet. You can see in the visual test for it

atomiks avatar Feb 16 '21 01:02 atomiks

Demo: https://codepen.io/strarsis/pen/VwmbZvB

Edit: The actual issue is that no example code is shown for setting the arrow size in pixels (as CSS transform would not work with bordered arrows): https://atomiks.github.io/tippyjs/v6/themes/#option-2-pixel-increase

strarsis avatar Feb 16 '21 13:02 strarsis

Okay. We should amend the docs to show an example in this case

atomiks avatar Feb 22 '21 03:02 atomiks

Anyone has a working example on how to increase size using pixels.

williams-aguilar avatar Dec 12 '22 18:12 williams-aguilar