opentip
opentip copied to clipboard
New hide trigger: click outside the tip
Would be a nice add-on to add clicking outside of the tooltip as a hide trigger.
I totally agree! Will implement it as soon as possible.
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
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 Doesn't this also close the tooltip when clicking inside the tooltip?
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']
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.
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/
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.
Was this ever implemented?
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();
});
});
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();
}
});
});