I used the qtip plugin. I write the qtip code
.on('click', '.selectionOptions', function(){
$('.selectionOptions').qtip({
style: {
classes: 'ui-component-config selectionOpt',
tip: false
},
content: {
text: 'Hai'
}
});
})
This qtip is intended to appear when I will click the .selectionOptions div.
However this qtip is appearing while I hover the div. How can I rectify this problem using jQuery.
For qTip 2 you can use
show: {
event: 'click'
}
Full example (from the documentation page):
$('.selector').qtip({
suppress: false,
content: {
text: 'You must have known to click me from the browser tooltip...!?'
},
show: {
event: 'click'
}
})
.attr('title', 'Click me to show a qTip!'); // Apply a title attribute to the elements
Have a look on the documentation here: http://qtip2.com/options#core.suppress
Related
I'm using Bootstrap Popovers to supply "help text" in my UI.
My existing JavaScript:
// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'hover',
placement: 'auto bottom'
});
The Popover displays when I hover with a mouse or touch the element. My problem is with anchor tag elements. If the Popover is triggered by a touch event:
Don't follow the link
Add an anchor tag element to the Popover text to give access to the underlying link
I'd detect whether the user is on a touch device, then serve different content from data attributes. Use Popover methods to trigger your various actions.
<a href="#"
data-href="http://jsfiddle.net"
data-toggle="popover"
title="A popover title"
data-hover-content="No link here."
data-touch-content="<a href='http://jsfiddle.net'>
A link here</a>.">A popover link
</a>
var is_touch_device = 'ontouchstart' in document.documentElement;
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'manual',
placement: 'auto bottom',
html: true,
content: function () {
if (is_touch_device) {
return $(this).attr('data-touch-content');
} else {
return $(this).attr('data-hover-content');
}
}
})
.on('mouseenter touch', function (e) {
$(this).popover('show');
})
.on('mouseleave', function () {
$(this).popover('hide');
})
.on('click', function () {
if (!is_touch_device) {
window.location.href = $(this).attr('data-href');
}
});
Fiddle demo
This can probably be simplified a bit. You could specify your content in the content function instead, of course.
this might help:
event.preventDefault()
"Description: If this method is called, the default action of the event will not be triggered... For example, clicked anchors will not take the browser to a new URL..."
I am using the TouchSwipe plugin for my carousel swipe effect.
The problem is that swipe does not work when I enclose the image or content within
I tried assigning them z-index but still it does not work.
I even tried their example and tried the same things using inspect element.
http://lazcreative.com/bs3/touchswipe.html
This is the script :-
$('#carousel-example-generic-myslider').swipe( {
swipeLeft: function() {
$(this).carousel('next');
},
swipeRight: function() {
$(this).carousel('prev');
},
allowPageScroll: 'vertical'
});
Please help.
Thanks
For touchswipe, there is an option 'excludedElements' which is defaulted to "button, input, select, textarea, a, .noSwipe". So 'a' tags will be excluded from the swipe event. You need to remove that 'a' reference from that.
Try this initialization, for eg:
$('#carousel-example-generic-myslider').swipe( {
swipeLeft: function() {
$(this).carousel('next');
},
swipeRight: function() {
$(this).carousel('prev');
},
allowPageScroll: 'vertical',
excludedElements: "button, input, select, textarea, .noSwipe"
});
I am using qtip2 for alert, confirm, dialogue functionality. Now I want to as (blockui plugin) block the view of the page until some process completes (e. ajax start etc). For that I am using following code
function blockPageDialog(content, title) {
/*
* mainbody is the id of the body section of html
*/
$('#mainbody').qtip(
{
content: {
text: '<img src="/Content/images/ajax-loader.gif"/>'
},
position: {
my: 'center', at: 'center', // Center it...
target: $(window) // ... in the window
},
show: {
ready: true, // Show it straight away
modal: {
on: true, // Make it modal (darken the rest of the page)...
blur: false, // ... but don't close the tooltip when clicked
escape: false //dont hide on escape button
}
},
hide: true, // We'll hide it maunally
style: {
classes: 'qtip-shadow qtip-rounded qtip-dialogue', // Optional shadow...
widget: true //themeroller
},
events: {
// Hide the tooltip when any buttons in the dialogue are clicked
render: function (event, api) {
// $('button', api.elements.content).click(api.hide);
}
// Destroy the tooltip once it's hidden as we no longer need it!
, hide: function (event, api) { api.destroy(); }
}
});
}
and I am calling above function as
blockPageDialog(imageToShowProcessing );
which is blocking page as expected.
Now I want to hide/destroy the blocking dialog created on completion of process (e. ajax complete) or on button click which not part of the dialog (thats why I commented code for button in dialog).
I tried following things
$('#mainbody').qtip('hide');
$('#mainbody').qtip('api').hide();
both are not working.
I am using jquery 1.9.1, qtip2 update (2.1) which solves $.browser error
Please guide me to to solve the problem
try $('#mainbody').qtip('destroy');
I have simple question, the bootstrap tooltip works on particular selector[tag] on hover[mouseover] as default i.e you need to hover on the tag to activate the tooltip or make it appear. I want to make it appear in an input tag when i left the tag or when cursor leaves that input tag automatically, not on hover[mouseover]...
The question at hand is by default the tooltip works on following
('selector').tooltip('show');
Is there anyway to make it according to my specifications above
Something like this
$('input').tooltip({
trigger: 'manual'
}).on({
blur: function() {
$(this).tooltip('show');
},
focus: function() {
$(this).tooltip('hide');
}
});
Example here - http://jsfiddle.net/UPRbm/
Try this:
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'manual'});
$('#example').blur(function() {
$('#example').tooltip("show");
setTimeout("$('#example').tooltip('hide');", 1000);
});
});
}
}
I'm using qtip for jQuery, and I have the following code
$('#content a[href]').qtip(
{
content: 'Some basic content for the tooltip', // Give it some content, in this case a simple string
style: {
name: 'cream', // Inherit from preset style
tip: 'topLeft'
},
show: {
when: 'click', // Show it on click...
solo: true // ...and hide all others when its shown
},
hide: {
when : 'focusout',
fixed: true
}
});
The desired effect is that the tip should display when I click on the link and stay there unless if I click on some other part of the page (hence the focusout), but at the same time if I click on the tip itself, I don't want it to disappear so that I can insert interesting stuff in it, hence the fixed: true... but then even when I do this it would still disappear when I click on the tip... what am I doing wrong or is there another way to prevent the tip from disappearing when I click on it but have it disappear if I click on another part of the page?
You need to use the unfocus event:
$('#content a[href]').qtip({
content: 'Some basic content for the tooltip',
// Give it some content, in this case a simple string
style: {
name: 'cream',
// Inherit from preset style
tip: 'topLeft'
},
show: {
when: 'click',
// Show it on click...
solo: true // ...and hide all others when its shown
},
hide: {
when: { event: 'unfocus' }
}
});
Working demo: http://jsfiddle.net/andrewwhitaker/rep87/
From the documentation:
The 'unfocus' event hides the tooltip when anywhere else on the document, except the tooltip itself, is clicked.