with following code qTip works for me and generates tooltips:
$('a.ppname[rel]').live('mouseover', function() {
$(this).qtip( {
content : {
url : $(this).attr('rel')
},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true, // Give it a speech bubble tip with
// automatic corner detection
name : 'cream' // Style it according to the preset
// 'cream' style
}
});
});
});
But the qTip is not removed from the dom, well sometimes it just disappears and appears again and I get a lot of opened tooltips:
I looked at the dom, the qtip seems not to be removed but just set invisible. I need some simple logic to destroy the tooltip. E.g. if a.ppname was focused and is not focused any more I could destroy it. But how would that look like in javascript? Any Ideas?
Update: I downgraded my jQuery to 1.3.2 recommended for qTip. I don't get tooltips that stay open anymore but there is another problem now:
The tooltips, which for now I can not delete seem to appear when I hover the next item. Please, provide some suggestions how to destroy the tooltip.
Update: using
$('a.ppname[rel]').each(function(){
in the first line of the code the problem is solved. But that leads to another problem another problem that I describe here qTip tooltip does not appear, jQuery. seems to be a dilemma^:D
I think what you want is
$('a.ppname[rel]').qtip({
content : {stuff},
style : {stuff},
position: {stuff},
show: 'mouseover',
hide: 'mouseout'
})
You can remove the tooltip from the DOM by calling the destroy method when the tooltip is hidden. Try this (kudos to Matt for his example that I copied and ammended):
$('a.ppname[rel]').qtip({
content : {stuff},
style : {stuff},
position: {stuff},
show: 'mouseover',
hide: 'mouseout',
onHide: function() { $(this).qtip('destroy'); }
});
Related
I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?
I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)
In Extjs 4.1.1a, How to keep the tip text of the slider always visible?
Currently, the tip text is being visible whenever the user drags the bar of the slider.
I searched on docs but couldn't find any related concepts.
If it is not documented or not possible, then please explain me how to create the tip text manually. The tip text should move along the bar of the slider and it should not overcome or hide any other adjacent components.
Here is my code which generates a simple slider:
xtype:'slider',
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 6,
minValue: 1,
maxValue: 12,
useTips: true,
tipText: function(thumb){
var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var value = Ext.String.format(months[thumb.value]);
return value;
},
Question 2: Is it atleast possible to show the tip text when hovered on the slider?
PS: I also asked the same question here.
EDIT 1: I am also moving the seek bar of the slider with two adjacent buttons (< and >). So, care must be taken that if I move the seek bar with the adjacent buttons then the tip text should also move.
EDIT 2: The tip text should be visible when hovered on the slider or the adjacent buttons.
Answer: http://jsfiddle.net/WdjZn/1/
I've managed to keep tip visible by overriding some event handlers in Ext.slider.Tip:
Ext.define('AlwaysVisibleTip', {
extend: 'Ext.slider.Tip',
init: function(slider) {
var me = this;
me.callParent(arguments);
slider.removeListener('dragend', me.hide);
slider.on({
scope: me,
change: me.onSlide,
afterrender: function() {
setTimeout(function() {
me.onSlide(slider, null, slider.thumbs[0]);
}, 100);
}
});
}
});
Ext.create('Ext.slider.Single', {
animate: false,
plugins: [Ext.create('AlwaysVisibleTip')],
// ...
});
Check out the demo.
Drawbacks of my approach:
It relies on private method onSlide
It applicable only to single slider
Keyboard navigation works properly only if animate is set to false
setTimeout is used in order to adjust initial position of the tip
Fixing this drawbacks would require hacking not only the Ext.slider.Tip class but Ext.slider.Multy class and probably Ext.slider.Thumb class.
Edit
Replaced changecomplete event with change event as changecomplete is not fired when slider.setValue() is called.
Added demo of slider with adjacent buttons.
Edit2
tipText config is no longer applied if custom tip plugin is used. You have to use getText config of the plugin:
Ext.create('Ext.slider.Single', {
animate: false,
plugins: [Ext.create('AlwaysVisibleTip',{
getText: function(thumb) {
var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return Ext.String.format(months[thumb.value]);
}
})],
// ...
});
Updated the demo.
for extjs 4.2,
change :
slider.removeListener('dragend', me.hide);
to :
slider.removeListener('dragend', me.hide, me);
I thought I had trouble using fancybox 2 with nivo slider wrapped by a div, but after some tests, I found that i have trouble using facybox 2 with div. So I will reorganize my question.
To make it clearer, I will post my codes in the following:
For css:
<style>
#content{
background: red;
}
#maximize{ width: 24px; height: 24px; }
</style>
For html:
max
<div id="content"> </div>
For JS:
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
It works as expected if I clicked the max button. However, if I closed the fancybox, the popup box is gone, and the original div with id = "content" disappear as well. this is not expected. I want the content become what it was, but not disappeared.
Other question: How can I change the size of the fancy box popped up? I want to make the fancy box larger.
I hope my question is clear enough. Thanks in advance.
You don't actually need :
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
... but only this :
$('#maximize').fancybox({
// API options here
});
... since .fancybox() already binds the click event to the selector #maximize, otherwise is redundant .... so does the 'href' : '#content' option since the href is already taken from the href attribute in the link.
On the other hand, fancybox will always hide the opened inline content since it would be its expected state (isn't it redundant to show in fancybox something that is already visible?) ... anyway, you could make it visible again using the callback afterClose like :
$('#maximize').fancybox({
afterClose: function() {
$("#content").show();
}
});
Regarding the second question, use the width and height options along with fitToView and autoSize to set your preferred box dimensions like :
$('#maximize').fancybox({
fitToView: false, // avoid the adjusting size to viewport
autoSize: false, // avoid set size based on content
width: 420, // or whatever
height: 320,
afterClose: function() {
$("#content").show();
}
});
See working DEMO
Here is my example in jsfiddle, hover over Minnesota to see the qtip popup. I am using qTip jquery plugin and I am getting stuck on making the qtip stay around long enough for someone to click the link on the tooltip. I have tried all kinds on scenerios to make it stay open. Reading the documentation it seems to be easy to do so but I tried these and no luck. I tried these
hide: { when: 'mouseout', fixed: true }
and
hide: { fixed: true, delay: 1000 }
and many others and nothing will keep the tooltip up so the user can click on a link. The thing that is irritating is that on the reference page. If you click on any of the example links they are doing exactly what i want to do and i went to the source and if seems that they are using
hide: 'unfocus',
and
hide: {
fixed: true,
delay: 240
},
but I tried both and the tooltip won't stay open. Am I missing something?
Since it appears the position of your tip is off to the right some, try this:
$(this).qtip(
{
hide:{ //moved hide to here,
delay:500, //give a small delay to allow the user to mouse over it.
fixed:true
},
content: $("." + test).html(),
style: {
name: 'dark',
style: {
border: 1,
cursor: 'pointer',
padding: '5px 8px',
name: 'blue'
},
border: {},
tip: true // Apply a tip at the default tooltip corner
}
});
Updated fiddle.
You've got 2 styles in your code and it's just all sorts of wonky. Here is your code, working.
http://jsfiddle.net/JDVTM/
I want to use either http://onehackoranother.com/projects/jquery/tipsy/ or http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ and I was wondering if lets say I have a div on my page that has a class 'item_info'.
Can I have my tooltip that is created output the div inside the tooltip and formatted properly according to my css?
Is there another plugin I should be looking into?
Thanks. I hope this is clear enough.
You could look into qTip
http://craigsworks.com/projects/qtip/demos/
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ allows you to specify additional css class for your tooltip styling as well as display "dynamic" data for the text. Take a look at the example below.
Notable areas: bodyHandler specifies which text to show in your tooltip (this will return your html from div), extraClass specifies css style to apply. Hope that helps.
$("#your_tooltip_element").tooltip(
{
bodyHandler: function() {
return $("#your_div").html();
},
showURL: false,
track: true,
delay: 0,
showURL: false,
opacity: 1,
fixPNG: true,
extraClass: "item_info",
top: -15,
left: 5,
cursor: "hand"
}
);