slowreflex

Anyone else have any ideas? I’m completely stuck on this one.

I have the following in the header.php

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
        $(function() {
            $( document ).tooltip({track: true},{
                items: "[tooltip]",
                content: function() {
                    var element = $( this );
                    if ( element.is( "[tooltip]" ) ) {
                        return element.attr( "tooltip" );
                    }
                }
            });
        });
</script>

And this in the CSS

.ui-tooltip {
            border: none;
            padding: 0px;
            position: absolute;
            background: transparent;
            z-index: 9999;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

I’ve been testing some other things and I can get more than one tooltip to show up if I don’t use the image tooltips, but just simple text. For example:

<area shape="poly" coords="183,390,184,426,229,426,233,421,233,391" href="#" tooltip="<img src='wp-includes/images/Research/AL_Acolyte_Corvette.png' width='278' height=233" />

That above will only show the first tooltip.

<area shape="poly" coords="184,299,184,333,228,333,233,328,232,299" href="#" tooltip="Test" />

That above will show all tooltips.

I don’t understand why though. Again, this works fine on it’s own webpage (not WordPress).

I made a page with just one of the image maps here and I still have the problem of it only wanting to display the first tooltip. So that issue seems un-related to the issue of not being able to display multiple image maps on the same page. Or atleast, it’s an issue in itself. It may be the cause of not being able to display multiple image maps as well.

Yes, no difference making a new page.

Thanks for your help btw. Hopefully we will get there eventually. ??

No, in the Text editor.

In the page text.

HTML is fine as far as I know. Here’s one of the image maps:

<img src="wp-includes/images/Research/AL_Research_Security.png" width="690" height="235" border="0" usemap="#ALmap2" />
<map name="ALmap2">
    <area shape="poly" coords="184,8,184,42,227,42,232,38,233,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Hangar_Defense.png' width='278' height=215 />" />
    <area shape="poly" coords="248,54,249,88,291,88,296,84,296,55" href="#" tooltip="<img src='wp-includes/images/Research/AL_Skilled_Hangar_Anima.png' width='278' height=253 />" />
    <area shape="poly" coords="248,146,248,180,291,181,296,177,296,146" href="#" tooltip="<img src='wp-includes/images/Research/AL_Homing_Mines_Design.png' width='278' height=233 />" />
    <area shape="poly" coords="312,8,313,42,355,42,360,38,360,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Shield_Bestowal.png' width='278' height=233 />" />
    <area shape="poly" coords="312,54,312,88,355,88,360,84,361,55" href="#" tooltip="<img src='wp-includes/images/Research/AL_Enduring_Devotion.png' width='278' height=269 />" />
    <area shape="poly" coords="312,146,312,180,355,181,360,176,360,147" href="#" tooltip="<img src='wp-includes/images/Research/AL_Savior_Design.png' width='278' height=215 />" />
    <area shape="poly" coords="312,192,312,226,355,227,360,221,360,193" href="#" tooltip="<img src='wp-includes/images/Research/AL_Evangelization_Nodes.png' width='278' height=251 />" />
    <area shape="poly" coords="376,9,377,42,419,42,424,38,424,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Synergy.png' width='278' height=233 />" />
    <area shape="poly" coords="376,54,376,88,419,88,424,83,425,54" href="#" tooltip="<img src='wp-includes/images/Research/AL_Merchant_Docks.png' width='278' height=215 />" />
    <area shape="poly" coords="376,100,377,134,418,134,424,129,425,100" href="#" tooltip="<img src='wp-includes/images/Research/AL_Mass_Disorientation.png' width='278' height=215 />" />
    <area shape="poly" coords="376,192,376,226,419,226,424,221,424,192" href="#" tooltip="<img src='wp-includes/images/Research/AL_Induced_Reverence.png' width='278' height=251 />" />
    <area shape="poly" coords="440,8,440,42,483,42,488,37,489,9" href="#" tooltip="<img src='wp-includes/images/Research/AL_Hardened_Cities.png' width='278' height=243 />" />
    <area shape="poly" coords="439,191,439,226,484,227,489,221,489,191" href="#" tooltip="<img src='wp-includes/images/Research/AL_Cowards_Submission.png' width='278' height=261 />" />
    <area shape="poly" coords="504,100,505,134,547,134,552,129,552,100" href="#" tooltip="<img src='wp-includes/images/Research/AL_Immaculate_Defense.png' width='278' height=271 />" />
    <area shape="poly" coords="504,146,504,180,546,180,551,175,552,146" href="#" tooltip="<img src='wp-includes/images/Research/AL_Meteoroid_Control.png' width='278' height=233 />" />
    <area shape="poly" coords="568,54,568,88,611,88,617,83,617,54" href="#" tooltip="<img src='wp-includes/images/Research/AL_Amplified_Punishment.png' width='278' height=307 />" />
</map>

Sure, I think it’s a pretty popular one:

https://www.ads-software.com/plugins/wordpress-social-login/

Yeah, I actually had that as an alternative and deleted it. The reason is that I’m trying to get all my member to sign-up through my Steam social login. I assume it’s easier to remove the login from that than add the steam social icon to it.

Thanks for the very clear and precise instructions. Works great! I have another question, but I’ll make a new thread about it.

Please don’t apologize for lack of something I want in a free plugin. ??

The work around directions would be great if it’s not too much trouble. If it is, I will happily wait for 1.1.5. I’m glad to see that the plugin is actively worked on as well. That makes it 6 stars!