Disable Tooltip on button hover -> Javascript

[timmy151]

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

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>

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:

Code: Select all

var tooltip = document.getElementById(ttID);
.
. var someString = Calculation of the selected values in a readable format
.
tooltip.innerHTML = someString;

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

[Melloware]

Try this...

1. Give your TT a widgetVar <pe:tooltip widgetVar="ttWidget" ...>

2. On Page load use the widgetVar to destroy the tooltip.

Code: Select all

$( document ).ready(function() {
    var widget = PF('ttWidget');
    var tooltip = $(widget.cfg.forTarget);
    tooltip.qtip('destroy');
});

3. Now in your selectCheckBoxMenu OnHide code recreate the tooltip.

Code: Select all

    var tooltip = document.getElementById(ttID);
    tooltip.innerHTML = someString;
    
    var widget = PF('ttWidget');
    widget.applyTooltip($(widget.cfg.forTarget), widget.cfg);