jQWidgets Forums

Tagged: color, jqxTooltip, Theme, Tooltip

This topic contains 6 replies, has 2 voices, and was last updated by Dimitar 11 years, 8 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

differently styled tooltips within the same application Posts

August 30, 2013 at 9:23 am differently styled tooltips within the same application #28024

stephan

Participant

Hi,

For my application I require tooltips with different styling, but can not find a way to implement this.

For example when I display a tooltip somewhere to show an error I’d like the tooltip to have a red color with a white text, sortof like jqxValidator shows its hints. Yet I cant use validator because I am not necessarily showing the tooltip for a form or input control.

My problem: how can I mix normal tooltips and differently styled tooltip (e.g. for errors) within the same application ?

Regards,
Stephan

August 30, 2013 at 9:36 am differently styled tooltips within the same application #28025

Dimitar

Participant

Hello Stephan,

You can achieve this by changing the theme property of specific tooltips. Here is how:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.energyblue.css" />
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.summer.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme1 = "energyblue";
            var theme2 = "summer";
            $("#filmPicture1").jqxTooltip({ content: '<b>Title:</b> <i>The Amazing Spider-man</i><br /><b>Year:</b> 2012', position: 'mouse', name: 'movieTooltip', theme: theme1 });
            $("#filmPicture2").jqxTooltip({ content: '<b>Title:</b> <i>The Avengers</i><br /><b>Year:</b> 2012', position: 'mouse', name: 'movieTooltip', theme: theme2 });
            $("#filmPicture3").jqxTooltip({ content: '<b>Title:</b> <i>The Dark Knight Rises</i><br /><b>Year:</b> 2012', position: 'mouse', name: 'movieTooltip', theme: theme1 });
            $("#filmPicture4").jqxTooltip({ content: '<b>Title:</b> <i>Harry Potter and the Deathly Hallows - Part 1</i><br /><b>Year:</b> 2010', position: 'mouse', name: 'movieTooltip', theme: theme2 });
            $("#filmPicture5").jqxTooltip({ content: '<b>Title:</b> <i>Harry Potter and the Deathly Hallows - Part 2</i><br /><b>Year:</b> 2011', position: 'mouse', name: 'movieTooltip', theme: theme1 });
            $("#filmPicture6").jqxTooltip({ content: '<b>Title:</b> <i>Inception</i><br /><b>Year:</b> 2010', position: 'mouse', name: 'movieTooltip', theme: theme2 });
            $("#filmPicture7").jqxTooltip({ content: '<b>Title:</b> <i>Star Trek</i><br /><b>Year:</b> 2009', position: 'mouse', name: 'movieTooltip', theme: theme1 });
            $("#filmPicture8").jqxTooltip({ content: '<b>Title:</b> <i>Star Wars</i> Episode III: <i>Revenge of the Sith</i><br /><b>Year:</b> 2005', position: 'mouse', name: 'movieTooltip', theme: theme2 });
            $("#filmPicture9").jqxTooltip({ content: '<b>Title:</b> <i>Thor</i><br /><b>Year:</b> 2011', position: 'mouse', name: 'movieTooltip', theme: theme1 });
        });
    </script>
</head>
<body>
    <div style="width: 400px;" id="container">
        <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" />
        <img style="margin: 8px;" src="../../images/The_Avengers.jpg" id="filmPicture2" />
        <img style="margin: 8px;" src="../../images/The_Dark_Knight_Rises.jpg" id="filmPicture3" />
        <img style="margin: 8px;" src="../../images/Harry_Potter_7_Part_1.jpg" id="filmPicture4" />
        <img style="margin: 8px;" src="../../images/Harry_Potter_7_Part_2.jpg" id="filmPicture5" />
        <img style="margin: 8px;" src="../../images/Inception.jpg" id="filmPicture6" />
        <img style="margin: 8px;" src="../../images/Star_Trek.jpg" id="filmPicture7" />
        <img style="margin: 8px;" src="../../images/Star_Wars_Episode_III.jpg" id="filmPicture8" />
        <img style="margin: 8px;" src="../../images/Thor.jpg" id="filmPicture9" />
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 30, 2013 at 9:51 am differently styled tooltips within the same application #28027

stephan

Participant

Hi,

Ok, I think I understand the concept of your advice: I must define a separate theme specifically for the purpose of getting a red tooltip and apply this to the tooltip. If in therory I want tooltips in three different stylings I would have to create three dedicated tooltip themes. Luckily I need just the one special tooltip

I’ll give this a try right away

Thanks,
Stephan

August 30, 2013 at 10:44 am differently styled tooltips within the same application #28036

stephan

Participant

Hi dimitar,

It looks like there is a bug in jQWidgets that prevents your idea from working correctly.

I have created a theme with “Theme Builder” where the tooltip has a solid dark red background. When I lok at the tooltip in Theme-Builder preview it shows up correct: red background, darker red border, white text.

But when I apply the theme to a tooltip in my aplication I get a grey background with black text.

I have been able tor eproduce the Pproblem in a fiddle:
http://jsfiddle.net/_stephan_/TW79Z/

(I simply pasted the result of theme builder into the CSS box)

I also made one more test: when using theme “black” instead of “tooltip-error” it works. As far as I can see the tooltip theme only works correctly if you use a background with a gradient background instead of a solid background.

Regards,
Stephan

August 30, 2013 at 10:50 am differently styled tooltips within the same application #28037

stephan

Participant

Hi again,

After some testing I foudn that its not related to the gradient background, sorry about that.

I’m now assuming that it does not work at all if tooltip background differs from standard background because the tooltip apparently uses “.jqx-fill-state-normal-error-tooltip” (ie. fillstate-normal for the choosen theme) for styling its background, which is not the backgroudn that has been defined for the tooltip.

Regards,
Stephan

August 30, 2013 at 10:57 am differently styled tooltips within the same application #28038

stephan

Participant

Hi,

I was indeed able to work around the problem by entering my desired tooltip background colors and text color into the “Default State” section of theme builder. With this workaround the tooltip content looks ok.

The only thing that still looks odd is that the littl arrow point at the parent control is still colored light grey even though the tooltip border color has been set to a dark red. For a perfect tooltip the arrow should have the same color as the border.

Regards,
Stephan

September 2, 2013 at 4:54 am differently styled tooltips within the same application #28125

Dimitar

Participant

Hi Stephan,

If you modify the border-color property of the class .jqx-fill-state-normal, the colour of the tooltip arrow will be changed, too, i.e.:

<style type="text/css">
    .jqx-fill-state-normal
    {
        border-color: Red;
    }
</style>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.