Give different background color to Tooltip

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Give different background color to Tooltip

Pragnesh
Hi,

I need to give different background color to the dijit.Tooltip
Is it possible? If yes, how?
Reply | Threaded
Open this post in threaded view
|

Re: Give different background color to Tooltip

srlawr
Assuming you are using a standard Dojo theme, I would suggest that to change the colour of a tooltip background you could add the following definition to your custom CSS file.

.dijitTooltipContainer {
    background-color: pink !important;
}

on quick inspection this does a reasonably tidy job of roughly re-colouring the core of the background, (the !important tag may or may not only be necessary in the quick test harness I threw up to work this out)

The pointy bit of the tooltip is defined by an image sprite though, found, in Claro, at themes/claro/images/tooltip.png (instant example from google api http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/images/tooltip.png) so one would suppose you will have to redraw that PNG in the corrosponding colour and then over-ride the background-image value of the dijitTooltipConnector CSS class.
Simon Lawrence - UK based Java application developer specialising in web services.

Check out the The Simon Lawrence Application Development Blog for more info, and more knowledge.

Reply | Threaded
Open this post in threaded view
|

Re: Give different background color to Tooltip

michaelgaigg
This post has NOT been accepted by the mailing list yet.
Or you add a class to the tooltip

      this.addTagsContainer = new TooltipDialog({
        'content': this.addTagsContent,
        'class': 'tooltip-custom'
      });

and then target the tooltipcontainer and connector (if necessary)

.tooltip-custom .dijitTooltipContainer {
    background: white;
}
.tooltip-custom .dijitTooltipConnector {}