How to get the qtip style as shown on their homepage? - javascript

Just added this plugin to my site. I want "qtips" exactly like the ones they have when you mouse over the big browser icons near the bottom.
I can't figure out what styles they're using for those. I've currently got this, but it doesn't come out the same:
$('a[title]').qtip({
'position': {
my: 'bottom center',
at: 'top center'
},
'style': {
tip: true,
classes: 'qtip-dark'
}
});
Anyone know what they're using?

You want to use qtip-tipsy instead of qtip-dark.
$('a[title]').qtip({
'position': {
my: 'bottom center',
at: 'top center'
},
'style': {
tip: true,
classes: 'qtip-tipsy'
}
});

Related

Why scrolling down faster than scrolling up with GSAP?

I'm new to GSAP and JS in general, I'm having some problems figuring out why I have two different speeds while scrolling up and down.
There's also a problem once it scrolls all the way up that automatically reverse the animation, this is not wanted.
https://codepen.io/Mahanon/pen/rNdedwa
gsap.registerPlugin(ScrollTrigger);
gsap.to('#bottom', {
"top": "0",
duration: 1.3,
ease: Quart.easeOut,
scrollTrigger: {
trigger: '#bottom',
start: 'top bottom',
end: 'top top',
toggleActions: 'restart reverse restart reverse'
},
});

qtip tooltip postion is not working in mobile

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?

jQuery qTip and FullCalendar with agendaWeek as view

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!

Keep qTip Tool Tip Always Visible

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
}

QTip2: Why does viewport not work with absolute positioning?

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

Categories