i am trying desperately to disable a tooltip which is bound to a selectCheckboxMenu, if a user is hovering over this selectCheckboxMenu.
1. When rendering the page, no items in the selectCheckboxMenu are selected --> tooltip should not be shown bc text within the tooltip is empty.
2. If a user selects items in the selectCheckboxMenu, i loop over the selected elements and put the values into the tooltip-text. Now the tooltip should be shown also via javascript because i do not want to send so much data back and forth to the server for just small changes on the dom.
This is the TT element which i am using
Code: Select all
<pe:tooltip atPosition="top right" id="Tooltip" for="#{cc.attrs.id}Cbx" rendered="true">
<h:outputText id="#{cc.attrs.id}TooltipText" value=""></h:outputText>
</pe:tooltip>
Style="display: false" also does not work as the display style gets always updated automatically somehow by javascript on mouseover, maybe a way to overwrite this?
Within the selectCheckboxMenu, there is an onHide event which fires after the selectCheckboxMenu is closed.
Then the values are added to the tooltip:
Code: Select all
var tooltip = document.getElementById(ttID);
.
. var someString = Calculation of the selected values in a readable format
.
tooltip.innerHTML = someString;
Only the one step on page render to disable the tooltip when nothing is selected brings me to desperation.
Hope you can help me, thank you