enyo / opentip

Opentip is an open source javascript tooltip based on the protoype framework.
http://www.opentip.org
1.25k stars 401 forks source link

New hide trigger: click outside the tip #19

Open NicoFerna opened 11 years ago

NicoFerna commented 11 years ago

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

enyo commented 11 years ago

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

enyo commented 11 years ago

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

bmcgin commented 11 years ago

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.

enyo commented 11 years ago

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

bmcgin commented 11 years ago

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']

pioterj commented 11 years ago

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.

Chris2011 commented 11 years ago

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/

Micka33 commented 10 years ago

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.

ShailChoksi commented 9 years ago

Was this ever implemented?

BenAlthauser commented 9 years ago
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();
    });
});
sakattack commented 9 years ago

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();

            }
            });
            });