jQuery qTip relative path for image source - javascript

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.

Related

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?

QTip show my ajax content before downloading all the content

I am using QTip in my project and I have a very frustrating problem.
I have a page which contains around 20 elements. while standing over them, qtip generate an ajax request and get additional details on these elements while showing them in a qtip.
The problem is that it seems the qtip show the tip before downloading all the content of the additional page and causing weird artifacts. This happen the first time for each additional content. second time it shows the tip there is no problem.
Here is how I am calling qtip :
$(".challenge_button").each(function (index, domEle)
{
$(domEle).qtip({
content: {
url: '/main/challenge_get_info/' + $(this).data("challenge-id") +'/'
},
position: {
adjust: { x: -50, y: -10, screen: true },
corner: {
target: 'bottomRight',
tooltip: 'topLeft'
}
},
style: {
name: $(this).data("state"),
width: {
max: 500,
min: 370
},
tip: true
},
show: {
ready: false,
delay: 500,
effect:
{type : 'fade', length : 400 }
}
});
});

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

How do I access the triggering element using QTip?

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,

Is it possible to tell qTip 2.0 to use other attribute than 'title' as default?

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'
}
}
});
});

Categories