search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.92k stars 520 forks source link

border.css: CSS arrow border #902

Open strarsis opened 3 years ago

strarsis commented 3 years ago

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.

atomiks commented 3 years ago

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

strarsis commented 3 years ago

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

atomiks commented 3 years ago

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

williams-aguilar commented 1 year ago

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