I am using Qtip Tooltip in jquery mobile, it is working fine in desktop and ipad, but in mobile device it's position is not working correctly.
Here is my script:
$('[data-tooltip!=""]').qtip({
content: {
attr: 'data-tooltip',
button: true// Tell qTip2 to look inside this attr for its content
},
position: {
my: 'bottom center', at: "top center",
adjust: {
y: 0
},
viewport: $(window)
},
show: {
event: 'click',
},
hide: {
event: false,
fixed: true
},
style: {
classes: 'qtip-bootstrap'
}
});
}
Am I doing something wrong?
Related
I used the qtip2 jquery plugin. The first qtip will appear when i will click the menu.the second qtip will appear when the mouse enter the first qtip. I set the first qtip is disappear when i will click the outside of the first qtip.But first qtip will not disappear when i will click the second qtip.
first Qtip:
hide = {
fixed: true,
delay: 300,
}
Actual result:first qtip is disappear when i will click the outside of the first qtip and click the second qtip itself.
Expected Result:first qtip will disappear when i will click the outside of the first qtip. but first qtip will not disappear when i will click the second qtip.
Note:The second qtip is fully placed the outside of the first qtip.
my code is:
_this.qtip({
style: {
classes: 'Details',
tip: {
corner: 'right center'
}
},
content:{
text:"HAI"
},
show: {
ready: true
},
hide: {
fixed: true,
when: 'unfocus',
},
position: {
my: 'right center',
at: 'center left',
adjust: {
x: -8,
y: 0
}
},
events: {
render: function(event, api){
$(this, api.elements.content).on("click", function(){
$('.tip-studio-right-menu').qtip("show");
});
},
hide: function(event, api){
api.destroy();
}
}
});
Hi I have a jQuery qTip tooltip in my web app and I am trying to set a relative path for an image in the tooltip.
The code I have is:
$('#behind-the-behaviour span[title]').qtip({
content: { title: { text: "Behind the Behaviour" }, text: "<img src='~/Images/behindbehaviour.png'/>" },
style: { border: { radius: 5 } },
show: { effect: function () { $(this).show(); } },
hide: { effect: function () { $(this).hide(); } },
position: { my: 'rightTop ', at: 'left center', target: this, viewport: $(window) },
});
It needs to be relative as this is a master page that is inherited by pages in different folders. When the path is set to just 'Images/behindbehaviour' the foldered pages can't access it
How do I make the jquery find the images through the relative path? Thanks!
Try:
text: "<img src='/Images/behindbehaviour.png'/>"
without the tilde (~)
That works for me.
I am making a website that anyone can embed our calendar using iFrame. That calendar is using FullCalendar and qTip.
I am using FullCalendar with a default view of agendaWeek, the problem with that is when I click on an event the qtip appears, but when I scroll down, the qtip popup position is like fixed. It is very difficult to explain so here's the jsfiddle
Here's my code:
$("#calendar").fullCalendar({
defaultView: 'agendaWeek',
allDayDefault: false,
allDaySlot: false,
columnFormat:{
week: 'ddd dS'
},
events:{
url:"http://<?=$rootUrl;?>/studios/fetch_event_calendar_public/",
data:{
id:"<?=$studio_id;?>",
}
},
eventRender: function(event,element,view){
... ... ... ..
jQuery(element).qtip({ // Grab some elements to apply the tooltip to
id: 'calendar',
content: {
text: html,
button: 'Close',
title: 'Event Details',
},
style: 'qtip-light',
position: {
my: 'bottom center',
at: 'top center'
},
show:{
event:'click',
},
hide:{
event: 'unfocus'
},
});
},
windowResize: function( view ) {
calendar.fullCalendar('option', 'height', $(window).height() - 40);
}
});
So what I want here is that when the fullcalendar is scrolled down or up, the qtip should not have a position of fixed, it should just stay where the event is.
Your help will be greatly appreciated! Thanks!
I am using qTip2 to handle some tool tips on my site. I have the following code inside a template for the pages it applies to:
HTML
<div class="overview"><img class="border-gray" src="src.jpg"></div>
<div class="estimate"><img class="border-gray" src="src.jpg"></div>
<!-- More HTML similar to above -->
JS
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'}
});
$('.estimate').qtip({
content: 'Estimating',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'}
});
//More JS as above
On the individual pages I would like to have the tool tip visible if the class correlates with the page. IE: site.com/overview would have the tool tip with the class of overview always visible. As would site.com/estimate have the tool tip estimate visible.
I have attempted to add this code to the page but it doesn't work:
$('.overview').qtip({
hide: false
});
What I am after is when the page loads the tool tip is visible. No mouse over etc is required. The visible tool tip will depend on what page is visible. IE: /overview = .overview tool tip.
How can I achieve this?
UPDATE
The following code will achieve what I am looking for:
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
show: {
ready: true
},
hide: false,
style: {classes: 'qtip-tipsy'}
});
However this portion of the code is in a template and not editable on the page level:
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'}
});
If I try this below the above code it doesn't work:
$('.overview').qtip({
show: { ready: true },
hide: false
});
How do I combine the two if one is not editable on the page level? IE: How would I add the show and hide code into the above code if I cannot edit the code on the page level?
SHOWING BY DEFAULT
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
style: {classes: 'qtip-tipsy'},
show: { ready: true }
});
This is the line you need:
show: { ready: true }
Here is the documentation:
gTip: http://craigsworks.com/projects/qtip/docs/reference/#show
gTip2: http://craigsworks.com/projects/qtip2/docs/show/#ready
SHOWING CONDITIONALLY
<?php
// Get the url
$current_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
// Get the two parts of the url, seperated by: /
$url_array = explode('/', $current_url);
?>
<script>
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
/* Check if the second part of the url is 'overview'
If it is, add the show ready code */
<?php if( isset( $url_array[1] ) && $url_array[1] == 'overview' ) : ?>
show: { ready: true },
<?php endif; ?>
style: {classes: 'qtip-tipsy'}
});
</script>
SHOWING CONDITIONALLY | ONLY JAVASCRIPT
<script type="text/javascript">
$(document).ready(function()
{
// Prepare some variables
var current_url = window.location.host + window.location.pathname;
var url_array = current_url.split('/');
// The qtip code
$('.overview').qtip({
content: 'Overview',
position: {
my: 'bottom center',
at: 'top center'
},
show: { ready: url_array[1] == overview ? true : false },
style: {classes: 'qtip-tipsy'}
});
});
</script>
show: {
ready: true
},
hide: {
event: false
}
jsFiddle http://jsfiddle.net/fDavN/2761/
I understand the concept of why it wouldn't via css, but not sure if the same behavior would apply to this tooltip plugin
initializeToolTip: function () {
$(".offer-item").each(function () {
$(this).hover().qtip({
content: {
text: 'loading...',
title: {
button: true
},
ajax: {
url: '/Fakepath/ToolTips/ToolTipHover',
type: 'GET'
}
},
style: {
classes: { tooltip: 'auction-item-tooltip' }
},
show: {
solo: true
},
position: {
viewport: $(window),
target: $(this),
my: 'top right',
at: 'top right',
adjust: {
method: 'flip flip',
x: 280,
y: -20
}
},
hide: 'unfocus'
});
});
},
initializeCloseToolTip: function () {
$('a.close-tooltip').live("click", function (e) {
e.preventDefault();
$(this).parents('.qtip').qtip('hide');
});
}
Trying to get the last element to flip sides when outside of the window to no avail. Been looking at position.container and viewport to no avail. Anybody know if I'm doing something wrong? I have 5 's with tool tips next to each other, then on the last one I want the positioning to switch to 'top left' and opposite positioning.
Any help is much appreciated. Thanks for your time! Awesome plugin btw!
Here's some SS's of whats going on.
Regular: http://i.imgur.com/bI3oR.jpg
Cut-off http://i.imgur.com/wWhyq.jpg
Edit: Added jsFiddle, link to dev forum http://craigsworks.com/projects/forums/thread-viewport-not-working-with-absolute-positioning?pid=12829#pid12829
Thanks again!
According to the author, the viewport and absolute positioning options do not work in tandem.
http://craigsworks.com/projects/forums/thread-viewport-not-working-with-absolute-positioning