alternative toolTipContainer css

[dovegrey]

hi there,
i would like to have two different css styles of tooltipContainer, where some have a grey background and others have a black background.
i've tried to specify a different toolTipContainer value for the specific key,
so i have in tooltip.js

$.extend(m.defaults, {
    toolTipContainer: '<div style="color: #eeebe2; background: #666666; padding:8px; text-transform: uppercase; font-weight: bold;"></div>',
    showToolTip: false,
    toolTipFade: true,
    toolTipClose: ['area-mouseout','image-mouseout'],
    onShowToolTip: null,
    onHideToolTip: null
});

and then in my html file:

   {
            key: 'light',
            stroke: false,
            fillOpacity: 0,
            toolTipContainer: '<div style="color: #eeebe2; background: #000000; padding:8px; text-transform: uppercase; font-weight: bold;"></div>',                
            toolTip: 'Ooh Nice. I&#8217;ll Take That.'
        }

but it doesn't seem to override the default.
any help in the right direction would be appreciated :)

[kadoka66]

Why not try adding some !important tags before the ; This might work.

[nicolainmateria]

same problem, have you solved it @dovegrey ?

[phillystyle123]

@nicolainmateria - were you able to solve this? I'm trying to do the EXACT same thing. If you did solve it, can you post your code?

[techfg]

Hello @dovegrey -

Thank you for the inquiry, apologies for the delayed reply!

Upon reviewing the code you specified, there seems to be a couple of different issues, however specifically regarding your question on why toolTipContainer specified at an area level doesn't override the default - the reason for this is that its not intended to behave this way as toolTipContainer is not an area level specific option. If you look at the Tooltip Options section of the docs page, you'll see that only toolTip is an area specific option. The showToolTip, toolTipContainer, and toolTipClose options are all instance level. This definitely is something that could be made more clear in the docs so I've noted it to do so.

Given the way I believe you interpreted the docs, it makes sense why you felt you needed to modify the IM tooltip.js toolTipContainer value (in order to get a different 'default'), however, the only thing required here to get a different default was to specify toolTipContainer when you initialize mapster.

The good news is that when you want to achieve is possible, albeit slightly verbose with regards to code required although there were some recent improvements (introduced in v1.4.0) that make it fairly straightforward.

IM < v1.4.0

1. Specify a toolTipContainer when you initialize mapster to null
2. Within each area, specify an HTML string or jQuery element that contains a div with the styling that you want for that area using the toolTip property

Here is a jsFiddle. Note that the jQuery element could also just be a string of HTML. Also, the fiddle could be improved to contain functions that build the jQuery element passing the parameter of background, etc. but I took the more explicit route for clarity.

IM >= v1.4.0

1. Specify a toolTipContainer when you initialize mapster to null
2. Add a data attribute to each area to use as a "condition/value" for which background to apply
3. Define a toolTip property at the instance level (this was not possible prior to v1.4.0) that is a function (only text & jQuery was possible prior to v1.4.0) that dynamically builds the jQuery object to return based on the value of the data attribute

Here is a jsFilddle.

Two other notes:

1. Another approach to achieve what you are after is to set showToolTip to false and use the toolTip API to programmatically display tool tips on your own (e.g. via the onMouseover property). The toolTip API accepts an options parameter and the template property of options will override the toolTipContainer instance level value.
2. You can use the set_options API to change toolTipContainer value at runtime so depending your use case, this might also provide a means to achieve what you are trying to do and would not require any of the above approaches since toolTipContainer would change dynamically when/if needed

If you still have questions regarding this, please review our Support page for the best places to receive help on ImageMapster. Additionally, if you feel that you've uncovered a bug in IM, please open an issue per our Bug Reports guidelines and/or if you would like to request a new feature, please open an issue per our Feature Request guidelines.

Hope this helps!