Add a tooltip/arrow mixin

[chriseppstein]

We need a utility to do something like this: http://cssarrowplease.com/

The masses have spoken:

[iammerrick]

<3

[sxtxixtxcxh]

we added this to the sass-recipes: https://github.com/chriseppstein/sass-recipes/tree/master/css-arrow

and yesterday, i found an updated version i was using on a newer project: https://gist.github.com/2630680

[alanhogan]

took me a while to visualize what was happening in that demo, but I totally get it now… if anyone is confused, just replace “transparent” with your favorite color :) Or check out: css triangles

[mirisuzanne]

The sass-recipes and gist versions are a good start, but I'm not sure why they use NSEW rather than the CSS standard TRBL directions. I think you could also compact the output quite a bit.

The other approach I've seen is cleaner (using a single pseudo-element) but only works in modern browsers using clip and transform (rotate). Not sure if there are other approaches we should be looking at as well?

[sxtxixtxcxh]

i used NSEW as directions the arrow should be pointing to keep it distinct from placement (i.e. a "north" arrow is not a "top" arrow)

[MoOx]

Maybe what I've done (one month before this issue) can be usefull https://github.com/MoOx/compass-recipes/blob/master/stylesheets/recipes/ui/helper/_arrow.scss Main problem solved.

I'm working on a more fluid "bubble" mixin, including simple box with arrow & more complex options like we can see on @necolas work http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ (Ref: https://github.com/MoOx/compass-recipes/issues/10)

[MoOx]

FYI I've finished something I will publish it soon (next compass-recipes update). I've made a "relative-position() to the parent element" mixin to place the arrow where you want using something like "bottom" (bottom center) or "top left". The tooltip curently just support css arrow using compass recipes triangle() mixin (refactored for the occasion). I think I've done something nice. Stay tuned.

[MoOx]

Here is what I've made

Source: https://github.com/MoOx/compass-recipes/blob/master/stylesheets/recipes/ui/_tooltip.scss

Demo: http://moox.github.com/compass-recipes/tests/recipes/ui/tooltip/ Demo source: https://github.com/MoOx/compass-recipes/tree/master/tests/recipes/ui/tooltip

It use this utility: http://moox.github.com/compass-recipes/tests/recipes/utilities/relative-position

[mirisuzanne]

@MoOx Good work. I love the ideas here, but I have some problems with the API.

To be clear, this also uses the triangle and pseudo-element recipes, which I haven't looked at closely. I think several of these utilities could be candidates for Compass Core, but I find the APIs for all of them to be bloated with more options than necessary.

Looking only at the tooltip mixin, for example, I don't see any reason to add transforms and border-radius to this. Those are edge cases easily handled by existing mixins. This mixin doesn't add any value to those, so there is no reason to merge them. We can remove those args, and use lists where appropriate to simplify the others. The important options for a css-arrow are:

• $position: <horizontal-offset/keyword> [ <vertical-offset/keyword> ] second position defaults to center as per CSS
• $size: <width> [ <height> ] height defaults to match width as per CSS
• $color: <color>
• $border: [ null | <border width> <border-color> <border-style> ] defaults to null

That would be a useful mixin on it's own, which could then be wrapped by a larger tooltip mixin with additional args for the origin element:

• $tooltip-background: [ <color> ] defaults to $color
• $tooltip-border: [ null | <border width> <border-color> <border-style> ] defaults to $border
• $tooltip-positioning: [ relative | absolute | fixed ] defaults to relative

relative-position has similar API problems in my mind, but again I think it's a great candidate for core if those issues are addressed.

[Anahkiasen]

Would love to finally see some new aesthetic stuffs in Compass. :)

[mirisuzanne]

I agree completely. :)

[krisbulman]

I also agree on this, having a collection of highly modifiable components such as tooltips & loaders would be a great addition.

On Tue, Sep 18, 2012 at 8:57 PM, Eric Meyer notifications@github.comwrote:

I agree completely. :)

— Reply to this email directly or view it on GitHubhttps://github.com/chriseppstein/compass/issues/883#issuecomment-8674990.