hojberg / cssarrowplease

Generate CSS tooltip arrows

Simon Højberg

UIs, Functional Programming, Architecture, Category Theory.

hojberg.xyz

Working on UIs at @unisonweb

---

Currently writing a book on collaboration in software: Programming is Collaboration

cssarrowplease's Issues

Arrow becomes bigger then container

Arrow becomes bigger then container and protrudes out the sides after certain size.

(i.e. when pointing to the left, the other two corner of arrow starts showing after 150px.)

Setting 0 border width generates 2 separate ".arrow_box:after" rules

Seems redundant, no?

Thin line next to arrow on iOS

Go to cssarrowplease.com on an iPhone. Zoom in on the arrow. You see a very thin line at the base of the arrow.

Pointer-events?

What's the deal with pointer-events: none on the pseudo elements? Wouldn't that only cause suppporting browsers to ignore all pointer events coming in on top of the arrow? In practise, wouldn't that prevent the user from being able to scroll or pinch using the fingers when that gesture starts on top of the arrow?

Or is there a good reason to have this rule?
...In which case, -ms-pointer-events should be added.

Feature request: Sass/Less version for the css?

Just a request :) I'm not that adept in backbone but i can try doing this if no one does it by next week.

double colon for pseudo elements

I think "::" is more appropriate for before after elements.

cssarrowplease Url redirects to http://www.avatsea.com/

Just wondering if your URL cssarrowplease.com got hijacked or something as is leads to www.avatsea.com

Feature request: Change ``.arrow_box``

Will be awesome if you can add a new field to change the class name: .arrow_box in all the generated css code.

Feature Request: rgba as background colour in option.

Would love to see this! Solid colours are nice but would be great to have the arrows being able to be transparent.

ie in this use case:

Also I am not quite sure what the purpose of the changing border-colour values if their opacity is 0.

IE10 scrub

make sure everything works in IE10

No shadow on the corner

When the corner is anywhere except on top you can see there is no shadow on it.
Maybe you can replace the box-shadow with a filter.
Example here http://dabblet.com/gist/3820382

Graphical bugg in FF12 on Win7

Feature Request: Background Images And Indented Triangles

Is it possible to add this to the demo? I'd like to have either divs with a background image and the arrow out at the botto, if possible. OR, it could be helpful to see a box with a triangle cut out of it at the top. Just a couple of things I've wanted in the past, thanks for making the cool app.

CSS3 drop-shadow filter auto-magically includes pseudo elements

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); becomes filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));

The glorious arrow now casts a shadow!

Support is webkit only at this point, but I think that a little progressive enhancement couldn't hurt, either way I think it's a technique that is relevant to the interests of those using this tool.

Why CSS3

Hi. Thanks for the code, looks good. I just wondered though, why would you use CSS3 for this? If you added a HTML DIV for before and after, then you dont need to use CSS3, therefore this would work in IE8 and below.. at the moment it doesn't. So with some simple changes you can make it work.

If you want it to work with IE8

Just add a fallback that uses background-color: transparent instead of rgba.

/* Fallback for IE8- which doesn't understand rgba */
border: 20px solid transparent;
/* Feed rgba to other browsers (FF PC needs it to avoid a bug) */
border: 20px solid rgba(255,255,255,0);

expires headers in /static

The built files in /static are named after the md5 hash of their contents. This means you can change your cache strategy for those files to add a far future expires and let the browser cache heavily.

Rewrite with react!

Hi, I am learning react.js recently.
cssarrowplease is awesome!
So I rewrite it with react.js, same UI, minor improvement added.
e.g.
realtime change
copy code generated
responsive layout (mobile first)

https://works.yangerxiao.com/css-arrow-generator/

github source

Pseudo-elements should use double colon syntax (:: instead of :)

:after and :before are relics left over from their CSS2 implementation. In the CSS3 module, these are defined as ::after and ::before. The only reason browsers still support the single-colon syntax is to prevent the CSS2 syntax from not functioning as intended.

Drop Shadow

Hi

How can you add a drop shadow to the border including the tip?

Thanks

Sizes in ems

In stead of pixels, I prefer setting sizes of elements in ems whereever possible. It makes sense for font-zooming, which would also cause the arrow to become bigger, which may be very sensible depending on the use-case.