Lates OS X?

[evolvecs]

I just upgraded to OS Mavericks last night and now the page I was working on with the Powertip isn't working. Is there any JS you know of that I have to update? When I open your example page it works... So maybe you updated something recently that isn't in the download?

[stevenbenner]

The OS wouldn't affect PowerTip, only the browser. Which browser are you seeing the problem in?

Also, exactly what is happening? No tooltips what-so-ever, or are you seeing broken tooltips?

It's possible that apple shipped a new version of safari with the OSX upgrade that might have some new quirks, unfortunately the last time I checked they still haven't released the latest Safari for anything other than mac so it's impossible for me to test.

[evolvecs]

Can I get email you separately to pay you to help with this?

On Oct 29, 2013, at 5:12 PM, Steven Benner wrote:

The OS wouldn't affect PowerTip, only the browser. Which browser are you seeing the problem in?

Also, exactly what is happening? No tooltips what-so-ever, or are you seeing broken tooltips?

It's possible that apple shipped a new version of safari with the OSX upgrade that might have some new quirks, unfortunately the last time I checked they still haven't released the latest Safari for anything other than mac so it's impossible for me to test.

— Reply to this email directly or view it on GitHub.

[evolvecs]

See it works on my laptop in Firefox, which I haven't upgraded the OS yet. Weird. Maybe I just need to restart my iMac.

[evolvecs]

Nope, it's still not working. I put the template on my test site so you can. In Safari one of the rollovers shows up in very top left corner. Firefox shows nothing. Both Outdoor and Indoor should have a popup to the West and East of each photo. http://evolvedevelopment.publishpath.com/

[stevenbenner]

There's a lot going on in the markup there, so diagnosing this will be a bit of a challenge. It works fine in Firefox on my system, but doesn't do anything in Safari (v5.1.7), so I can actually reproduce this issue. First off, a couple points:

• I haven't done any testing of using PowerTip with image maps, but I remember there being some issue reported in the past.
• PowerTip looks like overkill for what you're doing here, it might be better to just use a couple divs and a little jQuery fadeIn() and fadeout() on hover.
• There are a couple markup issues, and safari historically tends to be picky about valid markup.

Markup Issues

Right now the markup around the image map looks like this:

<div>
    <img src="indoor-outdoor.jpg">
    <map>
        <area>
        <area>
        <script>
        <script>
    </div>
</map>

There are two issues here

1. The div is closed before the image map - swap the </div> and </map> tags.
2. The script tags are inside the map tag - move that outside of the <map> tags.

Once you fix those we'll have a much more solid base to do testing.

Alternative to PowerTip

Like I said, it seems like PowerTip might be a bit overkill for a fairly simple effect like this. You might be better off just doing something like this:

$('#indoortree').on({
    'mouseenter': function() {
        $('#indoortip').stop().fadeIn(250);
    },
    'mouseleave': function() {
        $('#indoortip').stop().fadeOut(250);
    }
});
$('#outdoortree').on({
    'mouseenter': function() {
        $('#outdoortip').stop().fadeIn(250);
    },
    'mouseleave': function() {
        $('#outdoortip').stop().fadeOut(250);
    }
});

Just position the divs to fade in/out will CSS and you're done.

PowerTip's Image Map Support

Right now I don't test PowerTip against image maps, but I do recall there being some problem in the past. I'll need to create a little test case to confirm if positioning works correctly across all browsers using area tags. Since these can be complex polygons I would actually be surprised if jQuery's height() and width() methods work correctly with those in all situations.

[evolvecs]

Wow thanks for all your tips. If you know a better route than image maps I'll just pay you to do this for me. Can you email me outside of github? Thanks

On Oct 30, 2013, at 12:11 AM, Steven Benner notifications@github.com wrote:

There's a lot going on in the markup there, so diagnosing this will be a bit of a challenge. It works fine in Firefox on my system, but doesn't do anything in Safari (v5.1.7), so I can actually reproduce this issue. First off, a couple points:

I haven't done any testing of using PowerTip with image maps, but I remember there being some issue reported in the past. PowerTip looks like overkill for what you're doing here, it might be better to just use a couple divs and a little jQuery fadeIn() and fadeout() on hover. There are a couple markup issues, and safari historically tends to be picky about valid markup. Markup Issues

Right now the markup around the image map looks like this: