CSS conflict with HTML5 Boilerplate front-end template

[czers]

I am developing a webpage that uses HTML5 Boilerplate as a front-end template. Recently I received a request from the client to include some fancy tooltips on my web page, so I googled a bit and chose Opentip as a fitting js tooltip framework.

The problem is that !important switch from HTML5BP .hidden class:

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

messes up Opentip tooltips (tested on Ubuntu 12.04.1 with Chromium 24.0.1312.56 and Firefox 19.0):

tooltips displaying properly

tooltips displaying incorrectly (HTML5BP .hidden class added to CSS)

Can you/will you fix it somehow?

[enyo]

Thanks. I'm looking into it right now.

[enyo]

From my point of few, this is really something HTML5BP or jQuery should address, because it's incompatible. I think that using !important here is wrong and that HTML5BP should remove it. (Or you can just remove it from your HTML5BP CSS). When an element has a display: none !important property, the jquery's outerHeight and outerWidth don't work. So this is not directly related to Opentip. If you think I should work around it, feel free to reopen this issue.

[czers]

Oh, so that's the reason. As for the simplest solution, I was thinking about prefixing Opentip's hidden with, for example, opentip-, because this class is not used by the external developers (I think). And the same cannot be said about HTML5BP's hidden.

Anyway, I poked your code a little bit, set Opentip.prototype["class"]["hidden"] to "opentip-hidden", replaced class names in CSS and everything seems to work for now.

[enyo]

Yeah, that's a way to solve the problem... but it means that it get's more tedious for you to update to newer Opentip versions. I'll think of prefixing all my CSS classes, but it shouldn't be necessary to do this.

[mpgjunky]

Hi,

I am having an identical problem, with a the standard Magento css. The actual .hidden declaration is slightly longer:

.hidden { display:block !important; border:0 !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important; width:0 !important; height:0 !important; overflow:hidden !important; }

and I too have looked into prefixing your class, but have decided it's the wrong approach for future releases. I looked into changing the class name in Magento, but it's near impossible as the class name is used all over the place, both in html code, as well js.

In my humble opinion, I think it's best if you prefix your class instead. Alternatively perhaps you could give the user the option to override the class much like when creating your own style, an option like: hidden: "myhidden".

Cheers, Michael.

[enyo]

Ok, I'll prefix all my classes with ot- that should solve the problem. I'll release a new version today or tomorrow.

[mpgjunky]

Excellent, thanks.