Switch to pure CSS arrows about tipsy

[svnlto]

going to have a look at this.

[fmarcia]

You can tweak borders width for that: http://hedgerwow.appspot.com/demo/arrows.
Cheers!

[vicb]

Franck,
Thanks for sharing this link -> my attempt is here.
I have tried to make it simple to set the arrow color by setting it only once in the tipsy-arrow class (which make the css a bit longer).

I have been able to test it with ie6,7,8, ff and chrome (see commit message for details).

Some magics inside:

• line-height: 0 required for ie6,
• border: dashed also for ie

[fmarcia]

Thank you very much, Victor

You can add Firefox 3.6.8, Chromium 6.0.492 and Opera 10.6 on Ubuntu 10.04.
It works just fine.

[quaff]

please switch to pure css , abandon IE<9

[vicb]

FYI I have seen no problem with IE6+ and the pure css solution I have been using for tipswift

[MoOx]

So it's done now :)

5ce79f5

[vicb]

Cool !

2 minors comments about the solution I have proposed:

• It supports IE6 (don't know about this one but probably not) - see my previous message,
• You can change the color by editing a single border-color property (using inherit)

Something I can't really remember but I have spent some time to make it work:

I think I started with something similar as what you have done before fixing it by using border-top: none;. Otherwise your arrow dimension would be the exact double of what you expect.

This is easier to see when you increase the arrow size (you have to change the related properties accordingly). The symptom was that the arrow would overlap the inner box...

[MoOx]

The arrow should work on IE6, the problem is the "transparent" color.
A workaround is to use something like that
_border-{...}-color: pink; /** repeat for each transparent side */ _filter: chroma(color=pink);

But seriously... an tiny arrow for IE6... on the huge website I work on, I've less IE6 visitors than safari/mac...

The inherit for the color is a great idea !

[chrisjacob]

@jaz303
The current "Master" CSS arrow seems to be failing in IE6...

@vicb
Your CSS arrow looks to be working fine in IE6... https://github.com/vicb/tipsy/blob/master/src/stylesheets/tipsy.css

I think it's important to still support IE6+ without needing to make any changes to the supplied CSS (... keeping the .gif would be better in my mind then dropping IE6 support).

If a pure CSS solution works crossbrowser then I'm all for it... let's just make sure it's well tested, and IE6 compatible.

[MoOx]

IE6 is dead... Seriously...
This is a Microsoft website http://www.ie6countdown.com/

[twe4ked]

Sorry @chrisjacob, I have to aggree with @MoOx - IE6 is over 9 years old. Ditch it, if you need it personally I suggest you patch the new versions or use an older version.

[chrisjacob]

@twe4ked @MoOx... I know I know. I'm the first to jump on that ban wagon. But the reality is, this is our job (http://remy.tumblr.com/post/8334086394/what-do-you-mean-you-dont-like-ie6-really).

This is a simple utility script... so I feel it should support IE6.

It's not even hard to support IE6 in this case...

[MoOx]

We are talking about a tiny arrow. The "script" still works no ?

[twe4ked]

@chrisjacob Yeah, but this plugin doesn't need to suport a 9+ year old browser.

[chrisjacob]

@twe4ked yes, it doesn't "need" to support IE6... but it "can" fairly simply (we're not talking about cross browser testing an entire site's layout here...). Countless developers are going to be stuck supporting IE6 for a long time yet. Sure it sucks. But it sucks even worse for these developers if they can't get small wins like implementing an awesome Tooltip plugin without needing to hack up a custom work around.

@MoOx It may sound silly to be arguing over the arrow... but honestly the tooltip consists of 3 things: text, rectangle and an arrow. The arrow is a significant component.

[chrisjacob]

Also I should point out the issue description by @jaz303 states:

Checking to see if it's cross-browser compatible first, of course

World wide 9.7% using IE6 (and more importantly when your "enterprise" clients intranet is still using it - ugh) you're going to stay stuck supporting it.

Cross-browser compatible tooltips plz ^_^

[Mange]

The argument that's raised in the remy blog post is not enough here. It's talking about some unfortunate few that has to support IE6, not that everyone has to since a subset of us have to.

Of course you have to do certain hacks in order to support IE6, and that's extra time and complexity that should be transferred to the client. Let them know that upgrading to IE7 or 8 (or installing another browser for god's sake) for the intranet would not be that expensive since the development costs increase over time. Sure, it might be a bit blue-eyed to suggest that clients can learn, but money talks to a lot of them.

In order not to increase complexity to the majority of developers, devs working for IE6 compatibility need to either implement their own hacks, do a fork or just use an older version of the library. Don't forget that Git is a SCM system! Use an old SHA that works with IE6; IE6 is completely static so if that's the only target, you don't even need Tipsy's bugfixes - if it worked it will continue to work. If IE6 is one of many targets, it's still possible to sniff it using conditional comments and include an older version of Tipsy.

@jaz303 could even create a tag pointing to the last version supported by IE6. That could be the end of it.

[chrisjacob]

README

It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.

... if these guys are just some of the big guns using this plugin then surely they would care about IE6. Or at least that's probably the assumption by any other dev's looking to implement this plugin (that it's going to "Just Work").

I feel dirty standing up so passionately for IE6... I HATE IE6... we ALL do... I think clients should pay more if they insist on supporting it... but I still think to take a small utility plugin like this and saying "no dice IE6" is a bit over zealous.

I agree that getting rid of the sprite image is great... so why not implement @vicb 's CSS which from what I can tell works well cross browser (yep IE6 included)...

vicb@f9ca2d2

Also

You can change the color by editing a single border-color property (using inherit)

... if it can be easily support it should be. And if not, make that clear in the README ;-)

[MoOx]

Hey guys... just fork this and make a PR.

[jaz303]

Have changed to vicb's CSS and tested on IE6,7,8,9 - seems to work a charm.

[Mange]

Best of all worlds. :-)

[twe4ked]

Awesome, great work guys :-)

[chrisjacob]

Awesome ^_^ thx @jaz303

[jasonday]

I wouldn't mind a sprite option, as you can't get a border on the css arrow...so for advanced styling of the tooltip, it becomes problematic

[MoOx]

You can have a border with css arrow. Using 2 arrows with :before & :after ! I'll publish soon a demo on my compass-recipes repo.