jqxdropdownlist and tooltip bound

[dan123Participant]

Dropdown and event log tooltip, I want the dropdown to stay open when clicking inside that event log tooltip(this tooltip should also stay open). But also I want both the dropdown and event log tool tip to close together at same time when clicked outside of the body. So have both dropdown and tooltip stay open when its being clicked within them. But close both of them if the user clicks outside either of those two. .

I am using a plugin called jqwidgets and the components are jqxdropdownlist and tooltip

Sorry For demostration purpose I created a jsfiddle to show my problem:

http://jsfiddle.net/FndA6/41/

[ivailoParticipant]

Hi dan123,

You can bind to the close event of the DropDownList in the same way you bind to the open event.

$('#jqxDropDownList').on('close', function (event) {
          	$('#filmPicture2').jqxTooltip('close');
		   });

In this case, when the drop down is closed, the tooltip will be closed too.
Please refer to this drop down list example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[dan123Participant]

Oh it still closes the dropdownlist. I wanted like this, if a user clicks on the dropdownlist, the dropdown will open and the tooltip will open too. (This part is correct). But now when a user clicks inside the tooltip or dropdown, both the dropdown and the tooltip should stay open. And both the dropdown and tooltip should only close if the user clicks outside the body.

[ivailoParticipant]

Hi dan123,

As a workaround, in this case, you can open the Drop Down when the tooltip is clicked.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[dan123Participant]

Could you please show an example? Even though clicked on the tooltip, the dropdown listbox closes and opens again. I dont want that to happen. I want the dropdown listbox to stay open even though u click the tooltip and close both of them only if clicked outside.

[ivailoParticipant]

Hi dan123,

As a new approach, you can set the tooltip to closeOnClick: false and control it’s visibility via the drop down.
When the dropdown closes – the tooltip will be closed too. To prevent closing the dropdown when the tooltip is clicked, you can use

$(".jqx-tooltip").on("mousedown", function(event){
       			event.stopPropagation();
       });

Here is the demo with tooltip and drop down list.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[dan123Participant]

Thank you so much. I got it working

[Author]

Posts