CODEWITHSUNDEEP
cssdojotooltip
pierdeux
pierdeux

Reputation: 479

CSS Styling the prompt tooltips in dojo

Does anyone know the name of the CSS classes responsible for styling the dojo promptMessages (or invalidMessages) tooltip associated with ValidationTextBoxes.

Normally Firebug does a great job of revealing all the inner workings of CSS, but in this case the tooltip prompt disappears when I try to inspect it!

I am intending to play with such CSS properties as padding and width for the promptMessage tooltip.

Upvotes: 0

Views: 3516

Answers (3)

SnapShot
SnapShot

Reputation: 5544

I had a similar problem when trying to debug why the css for the ToolTip on the ValidationTextBox was showing up as a plain grey box instead of using the proper css. The normal way to view css and other information in Firebug does not work because the tooltip will disappear when you click on it. However, I found that using the standard Web Developer Toolbar you can go to the CSS menu item and select View Style Information (or just do cmd-shift-Y on your keyboard). This will turn the cursor into a crosshair. You can then move the crosshair over the tooltip and the entire css chain will display for the tooltip. This solved my particular styling problem by providing the hint that I needed to apply the proper theme class to the body tag. The system I am coding against does not allow me to directly alter or add to the body tag in the generated html. However I used dojo to add the class after load like this:

  dojo.query("body").addClass("claro");

and everything (Dialogs and tooltips) work great now.

Upvotes: 0

Maine
Maine

Reputation: 1878

Dijit Tooltip template reveals the structure:

<div class="dijitTooltip dijitTooltipLeft" id="dojoTooltip">
    <div class="dijitTooltipContainer dijitTooltipContents" dojoAttachPoint="containerNode" waiRole='alert'></div>
    <div class="dijitTooltipConnector"></div>
</div>

Upvotes: 3

pierdeux
pierdeux

Reputation: 479

Actually, although my question remains for general purposes, in the specific case that interests me, it's probably as easy to include as part of the tooltip content the css markings that will do what I want:

dijit.form.ValidationTextBox({
   promptMessage = "<div class='customizedWidth'>Blabla</div>"
},myNode);

That said, I would still be eager to learn the dijit class for that specific tooltip. It would become necessary in the case of wanting to change the look of that entire class...

Upvotes: 0

Related Questions