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/
Related
(bootstrap 4)
Hi all, I'm trying to make it so that when you click outside "popover" - it (popover) was hiding (kind of like I did it). And while doing so, I'm also trying to make the "disappearance" of the first popover when clicking on another(second) calendar event ("eventClick" event in Fullcalendar) and the appearance of another. But I can not understand how to do it.
P. S. If to show the popover only when the event is "eventClick"(FullCalendar's event), then the popover appears ONLY after the second click, for each event.
Code: Codepen.io
OR:
HTML:
<body>
<ul id="popover-content" class="list-group" style="display: none">
aaa
bbb
ccc
</ul>
<div id='calendar'></div> ...
JS:
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay,listDay"
},
themeSystem: "bootstrap4",
locale: "ru-RU",
defaultDate: "2018-03-12",
...
eventRender: function(event, element, view) {
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
return $("#popover-content").html();
}
});
},
editable: true,
eventLimit: true,
...
$("body").on("click", popoverCloseByOutsideClick);
function popoverCloseByOutsideClick(e) {
var isNotPopover = !$(e.target).hasClass('.popover'), isNotPopoverChild = ($(e.target).parents('.popover').length === 0), isNotEvent=!$(e.target).hasClass('.fc-event-container'), isNotEventChild = ($(e.target).parents('.fc-event-container').length === 0);
// if (!isNotEvent || !isNotEventChild) {
// // console.log($(e.target));
// // closePopovers();
// // e.target.popover('hide');
// // $(e.target).popover('show');
// }
if (isNotPopover && isNotPopoverChild && isNotEvent && isNotEventChild) {
closePopovers();
}
}
function closePopovers()
{
$.each($(".popover"), function(i, el) {
if ($(el).hasClass("show")) $(el).removeClass("show");
});
}
P.S.2 Please, forgive me for my English if something is wrong.
In order to close any previous opened popover you can call .popover('hide'):
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
// for each opened popover...hide it
$("#calendar .popover.show").popover('hide');
// ^^^^^
return $("#popover-content").html();
}
});
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
$('.popover').popover('hide')
return $("#popover-content").html();
}
});
I'm trying to dynamically generate a popup in mobile app I'm working on, but I'm experiencing an issue that I can figure out. I added a control-group with a couple of buttons, but the buttons are added twice (see image below). I'm sure it is very simple, but I can't see it. What am I missing here. Thansk!
This is the jQuery code:
var $popUp = $("<div><div/>").popup({
dismissible: false,
theme: "a",
overlyaTheme: "a",
transition: "pop",
positionTo: "window"
}).on("popupafterclose", function () {
//remove the popup when closing
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$("<h2/>", {
text: "Location Details"
}).appendTo($popUp);
$("<label/>", {
text: "Location: " + locationName
}).appendTo($popUp);
$("<label/>", {
text: "Note:"
}).appendTo($popUp);
$("<p/>", {
text: locationNote
}).appendTo($popUp);
$("<div data-role='controlgroup' data-type='horizontal' class='myGroup'/>").trigger("create").appendTo($popUp);
$("<a>", {
text: "Submit"
}).buttonMarkup({
inline: false,
mini: true,
icon: "check",
}).on("click", function () {
$popUp.popup("close");
}).appendTo('.myGroup');
$("<a>", {
text: "Back",
"data-rel": "back"
}).buttonMarkup({
inline: false,
mini: true,
theme: "e",
icon: "back",
}).appendTo('.myGroup');
$popUp.popup('open').trigger("create");
I ended up doing it using grids instead of controlgroup, for my purpose it work just fine:
var $popUp = $("<div><div/>").popup({dismissible: false, theme: "a", overlyaTheme: "a", transition: "pop",positionTo: "window"
}).on("popupafterclose", function () {
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$('<div class="ui-grid-a"><div class="ui-grid-solo"><div class="ui-block-a"> <h2>' + locationName + '</h2><label>Note: </label><textarea disabled="disabled">' + itemClickedNote + '</textarea></div></div>').appendTo($popUp);
$('<div class="ui-block-a" style="width:48%"><a data-icon="back" data-rel="back" data-role="button" class="ui-mini">Cancel</a>').on("click", function () {
$popUp.popup("close");
}).appendTo($popUp);
$('</div>').appendTo($popUp);
$('<div class="ui-block-b" style="width:48%; float:right"><a data- icon="plus" id="addLocationsBtn" data-role="button" class="ui- mini">Submit</a>').appendTo($popUp);
$('</div> </div>').appendTo($popUp);
$popUp.popup('open').trigger("create");
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?
I have this code.
tooltip: function() {
$(".form-item-label.info")
.append("<p title='' class='icon-info-sign info'></p>")
.tooltip({
tooltipClass: "tool",
show: null,
position: {
my: "right bottom",
at: "right top",
using: function(position, feedback) {
$(this).css({top: position.top+80, left: position.left-30});
$("<div>")
.addClass("tooltip-arrow")
.appendTo(this);
}
},
content: function() {
var msg = "<p>Some text</p>";
return msg;
}
});
});
How I can add style in my tooltip function? not from styles, but from key value like tooltipClass:"tool", show: null, position... content... STYLE: ?
There is no way to do it with default tooltip code.
You have to modify the library, you could fork tooltip.js and apply style/class attribute to tooltip element.
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
}