Do you have your full code Eric so we can see what effect you are going for?
Printable View
Do you have your full code Eric so we can see what effect you are going for?
Sure thanks for looking Paul! I stripped it down so the overlay is probably not lining up anymore but you get the idea. I feel bad to show you. After all your awesome code it looks like I'm going with the fixed width version. Mainly because I couldnt fully understand yours enough to edit appropriately and I coldnt get the fluid versions to do everything I wanted - aside form being perfectly fluid that is.Quote:
Originally Posted by Paul O'B
So to recap I'm just trying to get IE to stop popping up the tooltip when you hover "above" the "TOOLTIP" link in the demo page. I only want the tooltip to pop up when you over directly over the TOOLTIP link. And secondly I want to keep IE's cursor at default arrow. And no flickering to pointer.
As a side note. Another possible fix I thought of is to add in a jquery hover delay to the span. Like 30 second delay. But I cant seem to get that working either. And ofcourse a full CSS solution is preferd. And this falls back perfect for IE. It has everything except the animation, opacity, and shadow. IE is over half my visitors
Test Page
http://www.visibilityinherit.com/pro...sitepoint.html
oops sorry - use this one! http://www.visibilityinherit.com/pro...sitepoint.html. This has the AddToAny popup in it so you can see that it still pops up in IE when hovered over wrong area. And no overlay. Just display none. Also I figured out the cursor. Just needs to go on the span. Not span:hover. I really am rusty. So I just have the one AddToAny problem left.
Hi Eric,
You could just fork the code for IE as it doesn't have the transition effect.
e.g.
Code:<!--[if lte IE 9]>
<style type="text/css">
.tooltip span { display:none; }
.tooltip:hover span { display:block; }
</style>
<![endif]-->
ya I refuse. I hate having those in my html. It's a sign of failer for me.
What no super-duper Paul OB code?
What was wrong with the visibility:hidden method as that seems to work for me?
Code:.tooltip span{visibility:hidden}
.tooltip:hover span{visibility:visible}
Awesome! I'm glad I asked about the super duper code. That worked perfect. For some reason I just kept adding hidden to the hover event and not to the span at default. Man I need to hit the books. Lol. All the problems have been worked out. I even worked out the fact that ie clips the arrow off with the opacity filter in place. I found some obscure filter rule to turn it off on hover. Thanks Paul I am happy.
Cool now I can get ride of the opacity filter probably and use pie.css. Pie didn't work with the opacity filter in place.
Here is my final product with this tooltip http://www.visibilityinherit.com/cod...ss-browser.php. What do you think?
Looks very slick Eric -good job.:)
Thnaks Paul. So I figured out a alludingly simple way to simulate hover on touch devices (at least apple). Although I'm using media queries and have a couple questions about them because I have no experience with them. I'm using this to make ipad/iphone hover...
Code CSS:
The Question? So do media queries target devices by screen size? So is this correct? What if another say Android device is the same screen width - won't it be targeted to? I put the rules in my demo above so you can see in action if you have apple device.
Edit: That sucks, I just noticed firefox is 1px different on the bottom triangle (FYI triangle white border) than webkit/opera/ie.
The device-width media queries target the actual resolution of the device while min/max-width media queries refer to the viewing area.Quote:
Originally Posted by EricWatson
Yes if a device understand the media query then it will apply the styles within if they match.
It's funny the entire web seemed to of just copied one single sorce of information on those things. Reading on them all morning and I havnt learned anything. So if I understand you correctly I should use the min and max width to target specific size devices? Anyone know of a specific apple IOS css hack or other? I'm fairly certain android will hover and do he animation. So I don't want to feed it the same rules as iPhone/iPad.
No the best approach is to be device independent as you never know what size a device will be next. Take the ipad and ipad mini for example. They just appeared out of the blue.Quote:
Originally Posted by EricWatson
Layouts should be device independent and scale through the whole range. You just set the media queries at the point that your layout no longer works any more. Forget about devices just allow the screen to go really small and really big. All layouts are different and the point where a media query needs to work is different every time.
Well you could sniff it with JS but I wouldn't rely on hacks as mobiles have started reading each others vendor specific rules. there is the webkit hack but I don't think it will always remain safe.Quote:
Anyone know of a specific apple IOS css hack or other? I'm fairly certain android will hover and do he animation. So I don't want to feed it the same rules as iPhone/iPad.
Hover doesn't exist on mobiles but usually a menu will open when touched if its a link but the problem is making it go away again. You usually have to set up another link to close it or make the user touch somewhere else. Hover effects should really be avoided for mobiles or at least not be essential to the use of the site.
It's a bit of conundrum really.
Ya I can't sniff out WebKit because I only want iOS. Here is a simple demo I just made showing hover on iOS with css only. http://www.visibilityinherit.com/cod...hover-demo.php.
In my situation I can't use the display none - display block rutine needed for the iOS hover because it kills my animation. So I'm just looking for a way to target iOS. Anybody know if Android devices do hover? If not, does the hover in the demo above work on your android device?
I can't help you with android as I don;t have a device to test I;m afraid. As I said above you can make the ipad hover if you use a link and indeed this old menu from years and years ago works on the ipad with no problem except you can't close the menu. It's strange because if the top level anchors were spans the menu would still work in normal browsers but not on the ipad/iphone. It doesn't use display:none but moves it offscreen and the ipad is fine with that.Quote:
Originally Posted by EricWatson
I'm a bit short of time at the moment (and the wife has the ipad) otherwise I'd run some tests with your layout. If i get a chance tomorrow I'll have another look if you haven;t solved it yourself by then ;)
Ok I figured out my confusion here. With the rule -webkit-transition:all 0.3s ease-in-out; in place iOS won't hover unless I add display none - display block or display table - display block. So i just assumed ios didnt hover - never paid much attention i guess. So if you find iOS won't hover there is your fix.
Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link.
The strange thing in the dropdown example I showed you is that the link itself has no hover affect at all. Its the list element that when hovered shows the nested ul as there are no rules for the anchor yet it won't work on ipad/iphone unless there is a link in place.
Interesting. Thanks for posting your findings Eric as they will come in useful :)Quote:
With the rule -webkit-transition:all 0.3s ease-in-out; in place iOS won't hover unless I add display none