CODEWITHSUNDEEP
javascriptinternet-explorerselecthovertooltipster
TheBoef
TheBoef

Reputation: 23

Tooltipster hover select and option not working in IE

Im not sure if this the right place to ask this but Im having a problem with tooltipster and IE. When I make an interactive tooltipster that shows on hover and add a form with an selectbox in it, it is impossible too select an option in IE because the tooltipster closes and your unable to make an selection.

I made an Plunker to quickly show the problem (open in IE): http://plnkr.co/lckgcT

<div id="corres_button" role="button">
  Hover me for the tooltipster!
</div>

$(document).ready(function() {
  $('#corres_button').tooltipster({
    interactive: 'true',
    contentAsHTML:'true',
    trigger: 'hover',
    arrow: false,
    position: 'bottom',
    content: $('<div><span><strong>Try selecting an option in IE the tooltipster will close since it loses its hover</strong></span><form><label>Testing</label><select><option value="1">Test</option><option value="2">Test 2</option><option value="3">Test 3</option><option value="4">Test 4</option></select></form></div>')
  });
});

I tried adding all kinds of css options too the form select options (display: block/inline-block etc) and playing with the Z-index. But nothing works and the tooltipster keeps closing when I 'open' the select options.

Im sorry for the bad english and I hope the problem is clear!

Upvotes: 0

Views: 979

Answers (1)

TheBoef
TheBoef

Reputation: 23

Fixed it and updated the Plunker with the fix.

The problem wasnt just with tooltipster its with how IE implements the selectbox. You can fix it by adding the event.stopPropagation too the select.

Default fix:

$(document).ready(function(){
  $("select").mouseleave(function(event){
    event.stopPropagation();
  });
});

By fixing this in your tooltipster you need too add the following too the the functionReady of the tooltipster

Tooltipster fix:

functionReady: function(origin) {
    origin.tooltipster('content').find('select').each(function() {
        jQuery(this).mouseleave(function(event){
            event.stopPropagation();
        });
    });
}

Upvotes: 1

Related Questions