Hi
I am using igPopover component in ignite ui,Currently we have mouseenter to show the igPopover,is possible to show and hide the content when the mouse hover My requirements : I need to show the chart and buttons on content in igPopover, if i mouseenter the div, the igPopover show the chart and buttons, if i mouse out i need to close the igPopover.If it is possible to use in javasript HTML in igniteui?
Please help if this is possibleThanks in advance,
Robin Bronston D
Hello Robin,
Thank you for posting in our community.
By design when showOn option is set to mouseenter igPopover will hide on mouseleave event. I created a small sample and I am attaching it for your reference. If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.
Please feel free to contact me if you have any additional questions regarding this matter.
Hello Vasya,Thank you for your reply, its exactly correct, and i need additional thing is to use this facebook/twitter/YouTube link, now i can't click it,is it possible to use the inner content after that it close the popover.The below image is my requirement each box i need to hover to show the popover, and the popover content show the chart and buttons PDF CSV, when i enter i use it, when i out it closed.
Please check my requirement is it possible to work on popover or any other related component is there in ignite UI Thanks
Let mi verify your requirement. You would like to show the igPopover on hover, use the content (as in my example click the links) and hide it on mouse leave. Is that correct?
Looking forward to hearing from you.
Hello Vasya,
Yes its correct
Thanks
Thank you for your clarification.
By design when igPopover is shown on mouseenter it is closed on mouseleave. In case that you want to use the data in the popover it still needs to be opened. In this case you can have an external variable which determines whether you would like to have the popover opened on mouseleave or not. Based on this variable`s value the hiding event (fired before the popover is hidden) can be cancelled. If the event is cancelled the popover is not going to be closed until you change the external variables value and mouse leave the element again. I am attaching a sample illustrating my suggestion for your reference. In this app I have a checkbox which determines whether we want to use the content of the popover or not. Based on this value I am cancelling the hiding event if necessary
$( '#IGlogo' ).igPopover( { position: "start", showOn: "mouseenter", animationDuration: 150, maxHeight: null, maxWidth: null, contentTemplate: $( '#contactUs-template' ).html(), headerTemplate: { closeButton: true }, hiding: function (evt, ui) { if($("#toCancelEvent").is(":checked")){ return false; } } } );
Alternatively, the closeOnBlur option could be set to false. In this case the popover is going to be displayed on hover, however, it is not going to be hidden on mouseleave, respectively you will Abe to operate with popovers content. If you would like to close it the "X" should be clicked.
Please feel free to contact me if you need any further assistance with this matter.