We Keep Coding

qtip hide tooltip by click button inside

I have a button inside qtip tooltip which remove target object on click to it. But after remove target object(calendar event) tooltip stay visible. How to remove/hide tooltip also?
Below is qtip options and screenshot.
var content = '<button class="btn btn-xs btn-default delCalendarEvent" id="' + event._id + '"><i class="fa fa-trash"></i></button>';
element.qtip({
show: {
event: 'click',
solo: true
},
hide: {
event: 'click unfocus'
},
content: content,
style: {
classes: 'qtip-bootstrap'
},
position: {
my: 'bottom center',
at: 'top center',
container: $('.fc')
}
});

You can try playing around with having the content be generated from a function, like this:
$('a[title]').qtip({show: {
event: 'click',
solo: true
},
hide: {
event: 'click unfocus'
},
content: function() {
var context = this.context;
var btn = $('<button class="btn btn-xs btn-default delCalendarEvent" id="55">X</button>');
btn.click(function () {
$(context).qtip().destroy();
$(context).remove();
})
return btn;
},
style: {
classes: 'qtip-bootstrap'
},
position: {
my: 'bottom center',
at: 'top center',
container: $('.fc')
}
});
JSFiddle: http://jsfiddle.net/tnmj7w1p/

jQuery qTip relative path for image source

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.

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?

Loop through current widget instances

I am currently in the process of writing my own hinter widget using UI widget factory. For my turnOn and turnOff methods, I want either all my hints to be turned on or off OR if i pass an array of hint id's to this methods, they will turn on or off specifically only those with the ids.
Widget looks like this at the moment:
$.widget("ui.hint", {
options: {
id: '1',
text: 'This is a hint',
position: 'top',
offset: '0%',
hide: { effect: "explode", duration: 1000 }
},
_create: function() {
var o = this.options,
el = this.element,
shell = $('<div></div>').addClass('ui-hint ui-hint- '+o.position).text(o.text).css({
position: 'absolute',
minHeight: 100,
minWidth: 100,
background: 'rgb(250, 255, 189)',
zIndex: 9999
});
el.addClass('ui-hint-target');
this._trigger('beforeShow', null, shell) //added event before placing into dom
shell.insertAfter(el);
switch (o.position) {
case 'top':
shell.position({
"my": "center bottom",
"at": "center top",
"of": el,
"offset": o.offset+" -25%",
"collision": 'none none'
});
break;
case 'bottom':
shell.position({
"my": "center top",
"at": "center bottom",
"of": el,
"offset": o.offset+" 25%",
"collision": 'none none'
});
break;
case 'left':
shell.position({
"my": "right center",
"at": "left center",
"of": el,
"offset": "-25% "+o.offset,
"collision": 'none none'
});
break;
case 'right':
shell.position({
"my": "left center",
"at": "right center",
"of": el,
"offset": "25% "+o.offset,
"collision": 'none none'
});
break;
}
},
_setOption: function(key, value) {
if (value !== undefined) {
this.options[key] = value;
this._render();
return this;
}
else {
return this.options[key];
}
},
hide: function() {
this.element.next().hide("fast");
this._trigger('afterHide', null, this.element.next());
},
show: function() {
this._trigger('beforeShow', null, this.element.next());
this.element.next().show("fast");
},
hint: function() {
return this.element.next();
}
});
My question is, how can i organize those methods? I imagine I should loop through each instance of the widget and compare the values with their id's yet i don't know how. Will appreciate any advice, thanks in advance.

I may not be understanding your question fully, but if I was you I'd use a class rather than Id's to select multiple elements. Then you can use jquery's each method you can do something like:
$('.ui-hint').each(function(i, el) {
var $myHint = $(el);
console.log('index: ', i, ' jquery el: ', $myHint);
});

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
}