How to set the width of all the tool-tips in SmartGWT applicaion globally?

Question

I have lots of tool-tips in my SmartGWT application and now I want to change the width of each tool-tip without setting width of each individual tool-tip that is most tedious task.

I can set the width of tool-tip in SmartGWT using Canvas#setHoverWidth() but my concern is to apply this setting globally applicable for whole application.

Is there any way in SmartGWT to specify the tool-tip width globally applicable for whole application using CSS or JAVA code?

For sample code have a look at Hovers Tooltips Sample (Smart GWT).

Thanks in advance.

Answer 1

Finally I got the style name that is applied on all the tool-tips.

SmartGWT have a concept of Skinning that is the process of modifying Smart GWT's default look and feel to match the desired look and feel for your application.

A "skin" consists of:

• a single CSS stylesheet containing all CSS styles used by Smart GWT components (skin_styles.css)
• a single JavaScript file that sets component defaults (load_skin.js)
• a directory tree of images organized by component

---

I found the style canvasHover in skin_styles.css that is used for hovering on Canvas.

I just added min-width: 135px; that changed the width of all the tool-tips globally in the application. By default it's 100px.

/* hover canvas  */
.canvasHover,.gridHover,.formHover {
    background-color: #fdfdd3;
    border: 1px solid gray;
    color: black;
    font-family: Arial, Verdana, sans-serif;
    font-size: 11px;
    padding: 5px;
    min-width: 135px;
}

Thanks a lot for your attention.

Answer 2

I have no idea about SmartGWT works, but for this kind of dirty things if those elements are attached to the DOM, I'd use GQuery.

Something like:

GQuery.$("#yourTooltipId or .yourTooltipClass", RootPanel.get()).each(new Function() { public void f(Element e){
  GQuery.$(e).width(30);
}});

Instead of RootPanel.get(), you can use other scope if for any reason you have all the tool-tips under the same view.