Search code examples
javascripttwitter-bootstraplessprefix

Bootstrap Prefix

I have a problem after prefixing Bootstrap CSS in this way in bootstrap.less :

.myprefix{
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

.....other codes.....

// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
}

and my problem is working with components , I used tooltip & popover components but when for example I used tooltips it works but when mouse out the link or button hide itself I don't know why I have problem with modals to but it resolved by replacing line

163:.appendTo(document.body)`

with 

.appendTo($('.myprefix')[0])

Is there any whay to resolve it for tooltips & popovers?

Solution

  • I know your question is very old, but as I still can find it via google, i would like to gice some tips there. Your answer is explained in details here.

    The problem for you is that you compile everything inside your wrapper named .myprefix, so, in your final CSS, you get some wrong selectors like thoses one :

    • .myprefix html {}
    • .myprefix body {}
    • .myprefix .tooltip {} (.tooltip containers are created just after the body tag, that's why it won't work unless you edit the javascript to wrap them into your .myprefix container)

    So, what you need to do is :

    1. compile bootstrap and your theme modifications in a single css file
    2. perform a search and replace on this file to fix all the selectors that shouldn't be compiled inside your wrapper

    Regards.