I have a QTip assigned to an element as follows:
$('#myDiv').qtip({
show: { when: { event: 'click', } },
hide: { when: { event: 'unfocus' } },
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'red' // Style it according to the preset 'cream' style
},
position: {
corner: {
tooltip: 'topMiddle', // Use the corner...
target: 'bottomMiddle' // ...and opposite corner
}
},
content: {
text: self.parent('.qtip').html(),
title: { text: 'My Title' }
},
});
Under 'text' in 'content', I am trying to access the innerHTML of the element that triggered this QTip to appear after being clicked on.
However, my current means of self.parent('.qtip').html(), as displayed above, is not working.
What is the standard way to do this? Thanks.
I later found the solution to this question.
To access properties of the element that triggered the QTip, one must structure the code in this way:
$("#container a").each(function() {
$(this).qtip({ // QTip code });
});
That way, one can use $(this) to access data such as innerHTML of the element that triggered the QTip.
Maybe you could set it before:
var text = $('#myDiv').text();
And use it inside the object:
text: text,
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 need to change the text of the title of the tab in a TabPanel, but I don't want that this will affect every other TabPanel in the application, just this TabPanel.
I tried adding a CSS class by the cls property, by the itemCls property, and by this:
defaults: {
cls: 'aClass'
}
The CSS:
.aClass {
font-size: smaller;
}
But they all look the same:
Nothing seemed to work. How am I able to achieve that?
You should indeed use the cls property on your tabpanel and then have a custom CSS selector that would only point to that tabpanel:
See here: http://jsfiddle.net/49Dc8/
JS
Ext.require('Ext.tab.*');
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
cls: 'mytab',
width: 450,
plain: true,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [{
contentEl:'script',
title: 'Short Text'
},{
contentEl:'markup',
title: 'Long Text'
}]
});
});
CSS
.mytab .x-tab-inner{
font-size: 13px;
}
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
How do i tell qTip to use another attribute than 'title' as default?
The reason i need to use another attribute, is because when i disable qtip and dynamically add elements with "title", the title will show when i hover my mouse over the element. Which i dont want to happen.
Thanks
In our project, we also use qTip and force it to use content of a children instead of Title attribute. The children content is hidden by default (CSS -> display:none;)
$('.tipped').each(function()
{
$elem = $(this);
$elem .qtip({
content: $elem.children('.tiptext').html(),
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
}
},
style: {
tip: true,
name: 'blue',
color: '#A04242',
background: '#EEEEEE',
border: {
width: 1,
radius: 3,
color: '#4F81BD'
}
}
});
});