Disable Tooltip on button hover -> Javascript
Posted: 09 May 2019, 09:29
Hi all,
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
I can not user rendered="false" here, because then the element is not even on the dom.
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:
The second step, showing the tooltip with the correct values, if values are selected, works perfectly.
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
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