I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});
#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});
Related
Here is an example code that I have: https://jsfiddle.net/delux123/c9tj1ywa/15/.
Clicking over the button Alert, triggers an alert box:
function alertMethod() {
alert("test alert 1");
}
Now I wonder if it's possible to add such a custom actions, using the stock-tools? In the code above, I defined a new button customAnnotation in the stock tools
Highcharts.setOptions({
lang: {
stockTools: {
gui: {
customAnnotation: 'Custom action'
}
},
navigation: {
popup: {
customAnnotation: 'Action config'
}
}
}
});
Highcharts.stockChart('container', {
...
stockTools: {
gui: {
enabled: true,
buttons: [ 'customAnnotation' ],
definitions: {
customAnnotation: {
className: 'highcharts-custom-annotation',
symbol: 'text.svg'
},
}
}
},
navigation: {
bindings: {
customAnnotation: {
start: function(e) {
alert("test alert 2");
}
}
}
},
...
What I want to do is to trigger the alertMethod when clicking on this new custom button (in the stock tools). I wonder, is such a customization possible?
You need to add className and init properies, example:
stockTools: {
gui: {
enabled: true,
buttons: ['customAnnotation'],
definitions: {
customAnnotation: {
className: 'highcharts-custom-annotation',
symbol: 'text.svg'
},
}
}
},
navigation: {
bindings: {
customAnnotation: {
className: 'highcharts-custom-annotation',
init: function(e) {
alert("test alert 2");
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/3s25vq8m/
API Reference: https://api.highcharts.com/highstock/navigation.bindings
I resolved this by adding the event on chart load:
chart: {
events: {
load: function() {
document.querySelectorAll('.highcharts-custom-annotation')[0]
.addEventListener(
'click',
alertMethod
)
}
},
},
Full code is here.
(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 am using Bootstrap popovers with dynamic contents from my databese. In php, its creating dynamic classes for each popover. My question is, In jquery, do I need to call to triggering the popover separately?
This is how I use jQuery to trigger the popovers -
$(".image-info-popover-1").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-1').html();
},
title: function() {
return $('.popoverTitle-1').html();
}
});
$(".image-info-popover-2").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-2').html();
},
title: function() {
return $('.popoverTitle-2').html();
}
});
$(".image-info-popover-3").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-3').html();
},
title: function() {
return $('.popoverTitle-3').html();
}
});
$(".image-info-popover-4").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-4').html();
},
title: function() {
return $('.popoverTitle-4').html();
}
});
$(".image-info-popover-5").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-5').html();
},
title: function() {
return $('.popoverTitle-5').html();
}
});
But this is not the best way If I have a list of popovers to triggering out. So anybody tell me the good way to do this in a reusable manner?
Thank you.
If you want it be reusable, I'd put it in a function which takes a number as a parameter. Your function could look like this
var popover_func = function(n) {
$(".image-info-popover-"+n).popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-'+n).html();
},
title: function() {
return $('.popoverTitle-'+n).html();
}
});
};
You should be able to call this using a for-loop
for (var i=0; i<=5;i++) {
$(document).ready(popover_func(i));
}
I use dynatree to display a list of documents. When I load the template, the dynatree was stuck in the loading icon. What could be wrong?
$("#tree").dynatree({
checkbox: true,
selectMode: 2,
initAjax: {
url: "/getTree/",
dataType: "json",
data: {}
},
onSelect: function(node) {
},
onActivate: function (node) {
},
persist: true,
noLink: false,
fx: { height: "toggle", duration: 200 },
onPostInit: function (isReloading, isError) {
if (getStringOfSelectedTreeNodes() != '') {
}
}
}); });
</script>
Did you have an example maybe on CodePen to check what the issue is. It seems the last }); end braces was not needed, was this because it was within a jQuery $(document).ready(); method. Otherwise this would be the correct code: Some good examples on the dynatree example page which I'm sure you've seen.
$("#tree").dynatree({
checkbox: true,
selectMode: 2,
initAjax: {
url: "/getTree/",
dataType: "json",
data: {}
},
onSelect: function(node) {
},
onActivate: function (node) {
},
persist: true,
noLink: false,
fx: { height: "toggle", duration: 200 },
onPostInit: function (isReloading, isError) {
if (getStringOfSelectedTreeNodes() != '') {
}
}
});
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 }
}
});
});