opentip icon indicating copy to clipboard operation
opentip copied to clipboard

New hide trigger: click outside the tip

Open NicoFerna opened this issue 12 years ago • 11 comments

Would be a nice add-on to add clicking outside of the tooltip as a hide trigger.

NicoFerna avatar Nov 14 '12 13:11 NicoFerna

I totally agree! Will implement it as soon as possible.

enyo avatar Nov 14 '12 14:11 enyo

Hi. I started working on it, but I have to leave now so I'll finish it next week. The problem with it is that it involves framework specific changes (I have to stop the event propagation), so I'll have to implement it multiple times with tests. It'll be done next week.

Cheers

enyo avatar Dec 14 '12 17:12 enyo

Possibly I misunderstand the question....To hide when clicking outside of the trigger I have been using:

hideTriggers:[document, document], hideOn:['keydown','click'],

This hides when a key is pressed or the mouse is clicked. It will also closes when the tooltip itself is clicked.

bmcgin avatar Apr 03 '13 13:04 bmcgin

@bmcgin Doesn't this also close the tooltip when clicking inside the tooltip?

enyo avatar Apr 03 '13 19:04 enyo

Yes the tool tip is closed when clicking inside the tooltip. The OP did not say if that mattered, so I thought I would mention it.

This also works: hideTriggers:[document,document], hideOn:['keydown','mouseup']

bmcgin avatar Apr 03 '13 19:04 bmcgin

I agree this would be a very valuable enhancement. The workaround from the last comments works pretty well except for closing the tooltip when clicking inside it too.

pioterj avatar Sep 22 '13 06:09 pioterj

I cant get hideOn working, I have a textarea and when I said showOn focus or click all is ok but I have to leave the focus so I thought hideOn blur but nothing happens. Here is my example: http://jsfiddle.net/h3Zq6/1/

Chris2011 avatar Sep 26 '13 09:09 Chris2011

What about it now ? To be a bit more specific it would be nice to have it closed when clicking outside, but leave it open when clicking inside.

Micka33 avatar Jun 17 '14 16:06 Micka33

Was this ever implemented?

ShailChoksi avatar Nov 19 '14 21:11 ShailChoksi

var myOpentip = new Opentip(jQuery("#tooltipTrigger"), {
    showOn: 'click',
    hideOn: 'click',
    fixed: true
});

myOpentip.setContent('<a>test</a>');

jQuery('#tooltipTrigger').click(function(e) {
    e.stopPropagation();
    jQuery(document).click(function() {
        myOpentip.hide();
    });
});

BenAlthauser avatar Dec 14 '14 08:12 BenAlthauser

This works. It opens the tooltip on click and closes it with either the close button on the tip, or by clicking on the link that opened it in the first place or by clicking anywhere on the body except on the tooltip itself. The options i have included are just the ones I have in my case, you can have any options you want, the only ones necessary for this to work are the showOn: null , hideOn: 'click', fixed: true , the target and the hideTriggers

var myInput = $('#myTriggerElement');           

var inputOpentip = new Opentip( myInput, {

    group: 'more',
    containInViewport: true,
    target: '#'+moduleposs+'1',
    showOn: null,
        hideOn: 'click',
    fixed: true,
    hideTriggers: ['closeButton','target'],
    removeElementsOnHide: true,
    tipJoint: 'bottom left',
    ajax: urll,
    ajaxMethod: 'POST',


});

            $('#myTriggerElement').click(function (e) {
                e.preventDefault();
                if( $('.opentip-container').length ) { inputOpentip.hide(); }
                else { inputOpentip.show(); }
            });


            $('body').on('click', function (e) {
            $('.opentip-container').each(function () {
            // hide any open popovers when the anywhere else in the body is clicked
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && !$(myInput).is(e.target)  ) {

            inputOpentip.hide();

            }
            });
            });

sakattack avatar Aug 03 '15 22:08 sakattack