Geek asks and answers

Using themeroller theme in qtip2

I am currently using the REDMOND theme in my application and should ONLY use the THEMEROLLER tester for qtip2 tooltips. Since I defined the tooltip as a widget, it should use the themeroller of them. I cannot decide how and where to add the cssererlerler file to the javascript file.

Please, help.

The css files in the header section:

<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.19.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css" />
<link rel="stylesheet" type="text/css" href="css/wms11.css" />

Javascript files at the end of my js file:

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.qtip.min.js" type="text/javascript"></script>
<script src="js/wms11.js" type="text/javascript"></script>

My qtip2 instructions:

$(this).qtip({
     content: {
    text: function(api) {
        return(return_array[POPUP_HTML_STR]);
    },
    title: {
        text: function(api) {
            return(qtip_title);
        }
    }
    },
    position: {
    viewport: $(window)
    },
    style: { 
    classes: 'ui-widget ui-tooltip-rounded ui-tooltip-shadow ui-tooltip-dark',
    widget: true,
    tip: 'top center',
    width: 220,
    height: 200,
    padding: 5,
    background: 'black',
    textAlign: 'left',
    border: {
        width: 7,
        radius: 5,
        color: '#A2D959'
    },
    tip: 'top center',
    },
    show: {
    ready: true
    }
});
+3
source share
1 answer

As pointed out by P6345uk, you must set style.def = false to remove any qTip2 custom style. Worked for me.

$('.selector').qtip({
    content: 'I won\'t be styled by the pages Themeroller styles',
    style: {
        widget: true, // Use the jQuery UI widget classes
        def: false // Remove the default styling (usually a good idea, see below)
    }
})
+2
source

More articles:


All Articles