Tooltip is not displaed on mouseover of image through programatically

[kishi_kiran]

Hello All, I have a problem, trying to use a Tooltip created programtically to show on certain image, I am using Richfaces 4.2.1.Final,  javaEE6, Facelets 2.0

Here is the java code snippet where I create the Tooltip:

private UIComponent createLocationContainer(){
UIComponent locationContainer = this.htmlGenerator.createContainer("locationContainer");

locationContainer.getChildren().add(
this.htmlGenerator.ImageTag(icon_path/sampleImage.png", ""));

UITooltip tooltip = new UITooltip();
tooltip.setFollowMouse(false);
tooltip.setHorizontalOffset(0);
tooltip.setVerticalOffset(0);
tooltip.setStyleClass("infoPopup bigPopup");
  tooltip.getChildren().add(
                this.htmlGenerator.createTextLine("sample Text”, "heading"));

locationContainer.getChildren().add(tooltip);

return locationContainer;
}
public UIComponent createContainer(String cssClass) {
        HtmlPanelGroup hop = new HtmlPanelGroup();
        hop.setStyleClass(cssClass);
        hop.setLayout("block");
        return hop;
    }

Here the ‘locationContainer’ is attached to a child of other HtmlPanelgroup,

The problem here is : the tool tip is created to the htmlpanel group as a chiled, but when ever I mouseover on the image tooltip is not being displayed.

Here is the console output:

From this console also I can see that the tool tip is being added to the image, and I have observed that the css classes display: none for tooltip ,

Can someone help me out, is there any mouse over functionality needs to be added to the tool tip through programmatically?

Like It tooltip to be displayed whenever mouse over on the image , it is not happening.

Thank in Advance.

[michpetrov]

Hi,

the tooltip is attached to the div, not to the image. Check your CSS, if the div has zero height or a high z-index the tooltip wouldn't appear.

[kishi_kiran]

Hi Michal,

I have checked the CSS, there is no high z-index and for div I have specified height on css class, but no luck.

and here is the working version, which I have used in Rich faces 3.3.1, the console output for the working version is like this, which is differe from the current version RF 4 (what currently I am working on)

in this version the tooltip is working on mouse over.

the current version console output is:

what I have observed is the span structure after image tag is different from both, so will it causes to stop the mouse over tooltip ?

[michpetrov]

There are many differences between RF 3 and RF 4, difference in HTML is to be expected. Try to set showEvent to "mouseover", that's the default in RF 3.

[kishi_kiran]

Hi Michal,

I have tried this

terminalServicesTooltip.setShowEvent("mouseover");

still same problem, can we set it through programmatically?

[michpetrov]

Kishi kiran wrote:

Hi Michal,

I have tried this

terminalServicesTooltip.setShowEvent("mouseover");

still same problem, can we set it through programmatically?

Yes, I assumed that's how you were doing it.

[sesharao_n]

Hi Kiran,

By setting id to the component through programmatically, I am able to resolve this.

Below you can find some sample code,

private UIComponent createLocationContainer(IExecutionPlan IEplan) {

  UIComponent locationContainer = this.htmlGenerator.createContainer("locationContainer");

  locationContainer.setId("v" + Calendar.getInstance().getTimeInMillis() + new Random().nextInt());  //Setting Unique Id

  serviceVisitedNodes(locationContainer);

  UIComponent nodeNameContainer = this.htmlGenerator.createContainer("nodeNameContainer");

  nodeNameContainer.setId("v" + Calendar.getInstance().getTimeInMillis() + new Random().nextInt()); //Setting Unique Id

  /** Adds a popup with terminalservices * */
  UITooltip terminalServicesTooltip = new UITooltip();

  terminalServicesTooltip.setFollowMouse(false);

  terminalServicesTooltip.setHorizontalOffset(0);

  terminalServicesTooltip.setVerticalOffset(0);

  terminalServicesTooltip.setStyleClass("infoPopup bigPopup");

  terminalServicesTooltip.getChildren().add(

   this.htmlGenerator.createTextLine("Terminal Services in " + location.getName(), "heading"));

   terminalServicesTooltip.getChildren().add(this.createTerminalServiceContainer(IEplan));

  nodeNameContainer.getChildren().add(terminalServicesTooltip);

   //Tool tip should also be popped up when hovering the globe itself
   locationContainer.getChildren().add(terminalServicesTooltip);

   nodeNameContainer.getChildren().add(this.htmlGenerator.createTextLine(this.location.getName(), "nodeHeading"));

  locationContainer.getChildren().add(nodeNameContainer);

   return locationContainer;

}

[kishi_kiran]

Thank You Sesha Rao, It was really nice,

It got worked for me, one we place the ids for the components.

Thank You!