jQuery Tooltip CSS Styling and Appearance

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxTooltip.

jqx-widget - applied to the tooltip.
jqx-tooltip - applied to the tooltip.
jqx-fill-state-normal - applied to the tooltip. Adds border and background.
jqx-tooltip-main - applied to the tooltip body (sans arrow).
jqx-tooltip-text - applied to the tooltip content (text).
jqx-tooltip-arrow - applied to the tooltip arrow.
jqx-tooltip-arrow-t-b - applied to the tooltip arrow when it is shown at the top or bottom. In this class you can only edit the following css parameters to change the color of the tooltip arrow: border-top-color and border-bottom-color.
jqx-tooltip-arrow-l-r - applied to the tooltip arrow when it is shown at the left or right. In this class you can only edit the following css parameters to change the color of the tooltip arrow: border-left-color and border-right-color.

When you create a custom style with colors and backgrounds for jqxTooltip, you need to do the following:

Add the above CSS classes related to jqxTooltip
After each CSS class, add your theme name.
For example:
jqx-tooltip-shinyblack

To apply your custom style to jqxTooltip, you need to set its 'theme' property(option) to point to your theme name string.

<script type="text/javascript">
    $(document).ready(function () {
        // Create jqxTooltip
        $("#elementID").jqxTooltip({ theme: 'shinyblack', content: 'This is a div element.' });
    });
</script>

The sample below demonstrates how to set the 'Shiny Black' theme to jqxTooltip.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="Stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <link rel="Stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.shinyblack.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
   <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxbutton").jqxButton({ width: 100, height: 30 });
            $("#jqxbutton").jqxTooltip({ position: 'top', content: 'This is a jqxButton.', theme: 'shinyblack' });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div>
        Hover over the button to see a jqxTooltip in action.</div>
    <input type="button" style="margin: 50px;" id="jqxbutton" value="Button" />
</body>
</html>