HTML Elements Problem Dropdown and event log tooltip I want

HTML Elements Problem: 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/

Solution

<div id=\'jqxDropDownList\'></div>
<div style=\"font-size: 13px; font-family: Verdana; overflow: true; margin-left: -30px;\" id=\"filmPicture2\"></div>

var source = [
\"Affogato\",
\"Americano\",
\"Bicerin\",
\"Breve\",
\"Café Bombón\",
\"Café au lait\",
\"Caffé Corretto\",
\"Café Crema\",
   \"Affogato\",
\"Americano\",
\"Bicerin\",
\"Breve\",
\"Café Bombón\",
\"Café au lait\",
\"Caffé Corretto\",
\"Café Crema\",
\"Caffé Latte\"];

// Create a jqxDropDownList
$(\"#jqxDropDownList\").jqxDropDownList({
source: source,
theme: \'energyblue\',
width: \'200px\',
height: \'25px\',
checkboxes: true
});

$(\"#jqxDropDownList\").on(\'checkChange\', function (event) {

if (event.args) {

var item = event.args.item;
                      
                       if (item = \'Select All\') {

var items = $(\"#jqxDropDownList\").jqxDropDownList(\'getCheckedItems\');

var checkedItems = \"None\";

$.each(items, function (index) {

checkedItems += \"None\";

});

$(\"#checkedItemsLog2\").text(checkedItems);

}

if (item) {

var items = $(\"#jqxDropDownList\").jqxDropDownList(\'getCheckedItems\');

var checkedItems = \"\";

$.each(items, function (index) {

checkedItems += this.label + \" \";

});

$(\"#checkedItemsLog2\").text(checkedItems);

}
                   }

});
              
               // handle \"Select All / None\" item.
var handleCheckChange = true;
$(\"#jqxDropDownList\").bind(\'checkChange\', function (event) {
if (!handleCheckChange)
return;
if (event.args.label != \'Select All\') {
handleCheckChange = false;
$(\"#jqxDropDownList\").jqxDropDownList(\'checkIndex\', 0);
var checkedItems = $(\"#jqxDropDownList\").jqxDropDownList(\'getCheckedItems\');
var items = $(\"#jqxDropDownList\").jqxDropDownList(\'getItems\');
if (checkedItems.length == 1) {
$(\"#jqxDropDownList\").jqxDropDownList(\'uncheckIndex\', 0);
}
else if (items.length != checkedItems.length) {
$(\"#jqxDropDownList\").jqxDropDownList(\'indeterminateIndex\', 0);
}
handleCheckChange = true;
}
else {
handleCheckChange = false;
if (event.args.checked) {
                           $(\"#jqxDropDownList\").jqxDropDownList(\'selectItem\',\'STORE100\');
}
else {
$(\"#jqxDropDownList\").jqxDropDownList(\'uncheckAll\');
}
handleCheckChange = true;
}
});

$(\"#jqxDropDownList\").on(\"select\", function () {
                   $(\"#jqxDropDownList input\").blur();
               });
$(\"#filmPicture2\").jqxTooltip({ content: \'<p><b>Selected</b></p><div id=\"checkedItemsLog2\" ></div>\', position:\'right\', theme: \'energyblue\', autoHide: false, trigger: \"click\", closeOnClick: false, width: \'150\', height: \'10\' });

           $(\'#jqxDropDownList\').on(\'open\', function (event) {
// alert(\"hai\");
           $(\'#filmPicture2\').jqxTooltip(\'open\');
       });

$( \".checkedItemsLog2\" ).tooltip({
create: function( event, ui ) {
alert(\"kij\");
}
});


function selectme()
{
alert(\"last\");
}
  

// $(\'#filmPicture2\').jqxTooltip(\'open\');