ICEfaces
  1. ICEfaces
  2. ICE-9919

ace:tooltip - tooltip not displayed after updating field in an ace:dataTable

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Won't Fix
    • Affects Version/s: EE-3.3.0.GA_P01
    • Fix Version/s: EE-3.3.0.GA_P02
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      All

      Description

      An ace:dataTable has a few ace:tooltip components defined in each of its columns. The table also has a menu which upon selection will update another field in the table. When the menu is selected, the tooltip is no longer shown for the updated column and a refresh is required to have it shown again.

        Activity

        Hide
        Arran Mccullough added a comment -

        Attached test case that shows the issue. Note: The icefaces, ace, and compat, jar files need to be added into the war to run.

        Steps:

        • Load welcomeICEfaces.jsf
        • Hover over the items in Item One column, tooltip is displayed.
        • Change the menu in the first column, this will update the second column value.
        • Hovering over this item, it no longer displays the tooltip.
        Show
        Arran Mccullough added a comment - Attached test case that shows the issue. Note: The icefaces, ace, and compat, jar files need to be added into the war to run. Steps: Load welcomeICEfaces.jsf Hover over the items in Item One column, tooltip is displayed. Change the menu in the first column, this will update the second column value. Hovering over this item, it no longer displays the tooltip.
        Hide
        Ken Fyten added a comment -

        Using ace:delegate is a viable workaround and is necessary if the tooltip contents are specific to each row. Also note that using ace:ajax on the ace:tooltip to control the execution and rendering when the "display" event fires should work when using the ace:delegate.

        However, if the tooltip contents are essentially static and the same for every row in the dataTable, this should work and this appears to be a bug whereby the menu update is removing the JavaScript event listener originally setup by the tooltip. This will require further investigation to determine an appropriate solution.

        Show
        Ken Fyten added a comment - Using ace:delegate is a viable workaround and is necessary if the tooltip contents are specific to each row. Also note that using ace:ajax on the ace:tooltip to control the execution and rendering when the "display" event fires should work when using the ace:delegate. However, if the tooltip contents are essentially static and the same for every row in the dataTable, this should work and this appears to be a bug whereby the menu update is removing the JavaScript event listener originally setup by the tooltip. This will require further investigation to determine an appropriate solution.
        Hide
        Arran Mccullough added a comment -

        In the terms of my test case the tooltip content is static and does not change when the table content is changed.

        Show
        Arran Mccullough added a comment - In the terms of my test case the tooltip content is static and does not change when the table content is changed.
        Hide
        Arturo Zambrano added a comment -

        The reason why the tooltip doesn't appear after updating the cell's text is simply that the node that originally had the event listener to display the tooltip is removed from the DOM and replaced by a new node without re-applying the tooltip functionality. There's just no way for a basic tooltip to know that it's original triggerer has been removed. Even using ace:ajax rendered attribute wouldn't work to update the tooltip in this case because the tooltip itself doesn't change so there's no update sent in the response that would re-initialize the tooltip.

        Fortunately this can be easily fixed at the app level. Two ways are illustrated in the attached files welcomeICEfaces1.xhtml and welcomeICEfaces2.xhtml. In the first one, instead of an h:outputText, an h:panelGroup is used, which contains the tooltip itself, so when the panel group is updated, the tooltip is updated as well. In the second one, the issue is fixed by using the delegate mode. You simply wrap the table in an ace:delegate component and move the tooltip outside the table. Even if the content of the tooltip is static, delegate will work perfectly for this case too.

        Show
        Arturo Zambrano added a comment - The reason why the tooltip doesn't appear after updating the cell's text is simply that the node that originally had the event listener to display the tooltip is removed from the DOM and replaced by a new node without re-applying the tooltip functionality. There's just no way for a basic tooltip to know that it's original triggerer has been removed. Even using ace:ajax rendered attribute wouldn't work to update the tooltip in this case because the tooltip itself doesn't change so there's no update sent in the response that would re-initialize the tooltip. Fortunately this can be easily fixed at the app level. Two ways are illustrated in the attached files welcomeICEfaces1.xhtml and welcomeICEfaces2.xhtml. In the first one, instead of an h:outputText, an h:panelGroup is used, which contains the tooltip itself, so when the panel group is updated, the tooltip is updated as well. In the second one, the issue is fixed by using the delegate mode. You simply wrap the table in an ace:delegate component and move the tooltip outside the table. Even if the content of the tooltip is static, delegate will work perfectly for this case too.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: