I am using Qtip2 plugin for tooltip.Tooltip plugin working fine.But i want qtip comment when someone changes quantity in textbox.
I have tried this code but it display tooltip on onfocus.
$("input[id$=qty]").qtip({
content: 'click(update cart) after changing QTY',
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
show: {
when: {
event: 'focus'
}
},
hide: {
when: {
event: 'blur'
}
}
});
have you tried changing focus to something else?
$("input[id$=qty]").qtip({
content: 'click(update cart) after changing QTY',
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
show: {
when: {
event: 'keyup' //or change, keydown,keypress, etc.
} //some event that will change the value of an input
},
hide: {
when: {
event: 'blur'
}
}
});
Related
I'm using the small U.S. map in HighMaps and I want each state and it's datalabel to open up a new URL when clicked. I have the state working, but the label does not work.
this is what I tried:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
},
datalabels: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
}
}
},
Please see https://jsfiddle.net/sfjeld/zcsxobfa/12/ for the code.
Use the this.value instead of e.target.point.value:
plotOptions: {
series: {
point: {
events: {
click: function() {
const url = this.value;
window.open(url);
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6gpL57nf/
In your example, you could use:
e.point.properties.hasc
For get the value from the clicked point.
Code:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = "https://www.google.com/search?q=" + e.point.properties.hasc;
window.open(url);
}
}
},
}
},
You can check other values using this path:
console.log(e.point.properties);
The full code is in this forked jsfiddle
If you hover on Short Term Fuel Trim, the other plot lines are faded. How can I apply the same effect to yAxis which will fade other yAxis except Short Term Fuel Trim
You can use the yAxis.update method in the series mouseOver and mouseOut events to change title and labels color.
function updateYAxes(chart, exception, color) {
chart.yAxis.forEach(function(axis) {
if (axis !== exception) {
axis.update({
labels: {
style: {
color
}
},
title: {
style: {
color
}
}
}, false);
}
}, this);
chart.redraw();
}
Highcharts.chart('container', {
...,
plotOptions: {
series: {
events: {
mouseOver: function() {
updateYAxes(this.chart, this.yAxis, '#ededed');
},
mouseOut: function() {
updateYAxes(this.chart, this.yAxis, 'black');
}
}
}
}
});
Live demo: http://jsfiddle.net/BlackLabel/ju9g05xe/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOut
plotOptions: {
series: {
events: {
afterAnimate: function () {
for (let item of this.chart.legend.allItems) {
item.legendItem.on('mouseover', function (e) {
/**
* Register a callback based on the legend selected
*/
}).on('mouseout', function (e) {
/**
* Degerister a callback
})
}
}
},
I wish to add functionality when I mouseover the legend item but the above removes the default transparency functionality. How can I easily re-invoke?
You can add a part of default code for the events functions:
plotOptions: {
series: {
events: {
afterAnimate: function() {
const legend = this.chart.legend,
boxWrapper = legend.chart.renderer.boxWrapper;
for (let item of legend.allItems) {
let isPoint = item instanceof Highcharts.Point,
activeClass = 'highcharts-legend-' +
(isPoint ? 'point' : 'series') + '-active';
item.legendItem.on('mouseover', function(e) {
if (item.visible) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('inactive', !isPoint);
}
});
}
item.setState('hover');
if (item.visible) {
boxWrapper.addClass(activeClass);
}
}).on('mouseout', function(e) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('', !isPoint);
}
});
boxWrapper.removeClass(activeClass);
item.setState();
})
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5000/
Chart has Linear and Logarithmic buttons. How to get the one which is active to be highlighted? Code below changes colour on hover only.
https://jsfiddle.net/stgk1mrx/
navigation: {
buttonOptions: {
theme: {
states: {
hover: {
fill: '#00f'
},
select: {
fill: '#f00'
}
}
}
}
myButton: {
symbol: 'circle',
symbolStrokeWidth: 1,
symbolFill: '#bada55',
symbolStroke: '#330033',
onclick: function() {
// Something happens here
var self = this.exportSVGElements[2]; // 0-1 is first button, 2-3 is second button etc.
self.setState(2);
console.log('clicked!');
},
theme: {
states: {
hover: {
fill: '#FF0000'
},
select: {
fill: '#0000FF'
}
}
},
http://jsfiddle.net/yTRxZ/5/
By setting select state you will get color changed after click on button. You also need to call setState() for that button. Take a look at the example
I form charts and a have such series format:
series: {
id : '001',
name: 'name,
data: [],
color: '#fff'
}
In plotOptions I created onClick event:
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer',
allowPointSelect: true,
marker: {
states: {
select: {
enabled: true
}
}
},
point: {
events: {
click: function () {
console.log('!!!!!', this);
}
}
}
}
}
After clock i get object in log. There is all information except id: '001'. How can I get it?
You attached the click event to the point, so this inside the callback refer to the point object. Id is defined in series' options.
You can access it from series.options object:
point: {
events: {
click: function() {
console.log('!!!!!', this.series.options.id);
}
}
}
live example: http://jsfiddle.net/4s3ayhfy/