When dragging an event in week or day view. Randomly, qtips would be rendered with the old ones being still on the screen.
I have been disabling the qtips using apis but no result whatsoever. Following is my qtip configuration for fullcalendar event render event:
eventRender = function (event, element) {
$(element).qtip(
{
content: '<div>Hello, World!</div>',
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
},
style: 'qtip-light'
}
);
}
#Ibrahim, Use eventAfterRender function. It works for me.
eventAfterRender: function( event, element, view ) {
$(element).qtip(
{
content: '<div>Hello, World!</div>',
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
},
style: 'qtip-light'
});
}
Related
I have a line chart drawn with chart.js that shows some data.
I've added a delete element within the tooltip, but I don't know if it's possible to add an interaction, so that when I click the delete element, within the tooltip, some custom code is run that deletes the data from the Data base.
const weight_graphOptions = {
title: {
text: 'Weight',
display: true
},
scales: {
x: {
type: 'time',
time: {
// Luxon format string
tooltipFormat: 'dd-MM-yyyy'
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
display: true,
text: 'kg'
}
}
},
plugins: {
tooltip: {
events: ['click'],
callbacks: {
afterFooter:
function (addDeleteButton) {
return 'Delete'
}
}
}
}
}
Does anyone know if I can do this without building my own custom-made tooltip?
No this is not possible with the default provided tooltip, first it won't stay so when you try to hover the tooltip it's not there anymore
Second reason it won't work is because chart.js does not have any event listeners that listen to clicks/hovers over specific parts of the tooltip or the tooltip in general.
So you will need to make a custom external html tooltip that stays even while you don't hover datapoint anymore where you can add a normal button
I have treepanel. On some specific condition I want to show image on mouse enter and remove that image on mouseleave in treenode. but when i hover the mouse quickly image get added but not getting removed as itemmouseleave event is not getting fired.
I have prepared jsfiidle to understand my problem in which I am trying to change text of node on mouseenter and mouseleave. on slow motion it is working fine but if hover quickly it shows mouseenter even if we are away from node.
Link to jsfiddle : http://jsfiddle.net/79ZkX/238/
Ext.create("Ext.tree.Panel", {
title: "Car Simple Tree",
width: 400,
height: 600,
store: store,
rootVisible: false,
lines: true, // will show lines to display hierarchy.
useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed
renderTo: Ext.getBody(),
listeners: {
itemmouseenter: function(_this, _item) {
var name = _item.get("name");
_item.set("name", "mouseenter");
},
itemmouseleave: function(_this, _item) {
//var name = _item.get('name');
_item.set("name", "leave");
}
},
columns: [
{
xtype: "treecolumn",
dataIndex: "name", // value field which will be displayed on screen
flex: 1
}
]
});
I want to remove the image on mouseleave. Thanks
Added manual workaround for this. On Fast Mouse Hover itemmouseleave event will not get triggered. so i am maintaining array of hovered node and on mouseenter of node, checking if array contain element then set text of that node.
added code to this jsfiddle: http://jsfiddle.net/79ZkX/250/
Ext.create('Ext.tree.Panel', {
title: 'Car Simple Tree',
width: 400,
height: 600,
store: store,
rootVisible: false,
visibleNodes: [],
lines: true, // will show lines to display hierarchy.
useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed
renderTo: Ext.getBody(),
listeners : {
itemmouseenter: function(_this, _item) {
for (var i = 0; i < this.visibleNodes.length; i++) {
var node = this.visibleNodes[i];
node.set('name', "leave");
this.visibleNodes.splice(i, 1);
}
var name = _item.get('name');
_item.set('name', "mouseenter");
this.visibleNodes.push(_item);
},
itemmouseleave: function(_this, _item) {
//var name = _item.get('name');
_item.set('name', "leave");
var index = this.visibleNodes.indexOf(_node);
if (index != -1){
this.visibleNodes.splice(index, 1);
}
},
},
columns: [{
xtype: 'treecolumn',
dataIndex: 'name', // value field which will be displayed on screen
flex: 1
}]
});
I want to add a cytoscape node at the location of mouse arrow, on a click event on the canvas.
How can I do this?
My approach: (not working so well)
I am able to create a node on a click but I am not able to make sure the position of the created node is at the place where I have clicked.
Using something like this:
$("#cy").click(function(event){
pos = getMousePosition(this, event)
cy.add([
{ group: "nodes", data: { id: "testid" }, position: pos },
]);
});
I have not been able to define getMousePosition() correctly. How should I define this function to get the node rendered at the right position irrespective of the location of the cytoscape canvas?
The mouse works with rendered coordinates on the screen. If you would like to add a node at a specific rendered position, it would be easiest to specify the new node position in rendered coordinates, e.g.:
cy.add([
{ group: "nodes", data: { id: "testid" }, renderedPosition: rpos } // , ...
]);
It then becomes trivial to pass the rendered mouse position (relative to the cy.js div), e.g. http://api.jquery.com/position/
In cytoscape.js 3.2, there are convenience functions for this:
cy.on("tap", function(e) {
cy.add([{
group: "nodes",
id: "testid",
renderedPosition: {
x: e.renderedPosition.x,
y: e.renderedPosition.y,
},
});
});
This ends up being equivalent to (assuming you've set container: $("#cy-container")):
cy.on("tap", function(e) {
let canvas = $("#cy-container").find("canvas").get(0);
cy.add([{
group: "nodes",
id: "testid",
renderedPosition: {
x: e.originalEvent.pageX - $(canvas).offset().left,
y: e.originalEvent.pageY - $(canvas).offset().top,
},
});
});
It was not clear to me how to use the jQuery's position funciton in order to get the mouse coordinates, as the #maxfranz suggested.
The code I use is:
$("#cy").click(function(event) {
var pos = {x: event.offsetX, y: event.offsetY};
cy.add([
{ group: "nodes", data: { id: "testid" }, renderedPosition: pos },
]);
});
I am using qTip2 to display a text box, within which there is a link. I want to display a tooltip when mouse is over this link.
Cannot figure out how to do this.
First, is this doable? And then how if yes?
Thanks for help!
Edit
Dihedral, thanks so much for your info. I followed your approach, but it is still not working. I looked at the html code of the page and notice that in your jsFiddle code, additional html is generated (by qTip) for the second tooltip popup. But in my case, I cannot find such additional html.
The following is my code and this is the jsFiddle link http://jsfiddle.net/mddc/bacqe/6/
$('#author').qtip({
content: {
text: $('#author-container').html()
},
show: {
solo: false,
event: 'mouseover'
},
hide: {
event: 'unfocus'
},
style: {
tip: false,
classes: 'author-content forcedzLowIndex'
},
position: {
my: 'top right',
at: 'bottom right'
},
events: {
render: function() {
buildQtipInfoTooltip($('#author-allow-friends-link'), 'title', 'forcedzHighIndex');
}
}
});
function buildQtipInfoTooltip(jEle, attr_name, classes) {
jEle.qtip({
content: jEle.attr(attr_name),
position: {
at: 'bottom right',
viewport: $(window),
adjust: {
y: 4,
x: 0,
method: 'shift'
}
},
style: {
classes: 'tooltip' + ' ' + classes,
tip: false
}
});
}
.forcedzLowIndex {
z-index: 10000 !important;
}
.forcedzHighIndex {
z-index: 99999 !important;
}
Modifying my answer to use your example code:
Your first qTip uses
content: {
text: $('#author-container').html()
},
for the content. That technique will result in a clone of the #author-container elements, instead of using the existing elements. So your second qTip was being applied, but it was getting applied to elements that were never appearing on screen.
I took away the .html() and it worked for me. Try this: http://jsfiddle.net/bacqe/13/
content: {
text: $('#author-container')
},
Here's my issue:
I am using the phonegap framework to develop a hybrid app, and I need this application to have graphs for which I had decided to use the highcharts library.
The problem is that I can't seem to be able to scroll after touching on the chart (at least while touching inside the selected portion of the image).
What I want to do is prevent the chart from taking any events and show a plain graph with anything being highlighted and be able to scroll even if im doing it over the graph.
Code:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'containerBar',
animation: false,
type: 'bar',
events: {
click: function(event){
return false;
}
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Fruit Consumption'
},
plotOptions: {
bar: {
events: {
click: function(event){
return false;
},
mouseOver: function(event){
return false;
},
legendItemClick: function () {
return false;
}
},
states: {
hover: function(){
alert("Allow");
}
}
}
},
events: {
click: function(e) {
alert("Click");
}
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Jane',
data: [1, 3, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
Try this link ....
Just make a separate javascript file ,copy paste the code and include the file
To follow up for folks reading this question and its answers, the issue with scrolling and Highcharts visualizations was resolved with Version 3.0.1 (2013-04-09). Highstock, a sibling of Highcharts, received a similar update with Version 1.3.1 (2013-04-09).
Added new option, tooltip.followTouchMove. When this is true, the
tooltip can be moved by dragging a single finger across the chart,
like in Highcharts 2. When it is false, dragging a single finger is
ignored by the chart, and causes the whole page to scroll. This
applies only when zooming is not enabled.
Further enhancements were made in Highcharts Version 4.1.0 (2015-02-16):
Made tooltip.followTouchMove true by default, and allowed page scroll
at the same time.
For the complete Highcharts change log, see http://www.highcharts.com/documentation/changelog.
The problem is caused by Highcharts capturing all touch events and making them do nothing. I solved this by basically just overlaying a div over the chart area on mobile devices and preventing those events from reaching highcharts elements (so they are free to trigger default behavior, i.e. page scrolling). I used this JS (assuming you are also using JQuery or equivalent):
$('.highcharts-container').each(function() {
var dragHandle;
dragHandle = $('<div class="chart-drag-handle">');
$(this).append(dragHandle);
dragHandle.on('touchstart', function(e) {
e.stopPropagation();
});
dragHandle.on('touchmove', function(e) {
e.stopPropagation();
});
dragHandle.on('touchend', function(e) {
e.stopPropagation();
});
dragHandle.on('touchcancel', function(e) {
e.stopPropagation();
});
});
The elements added would need to be styled to overlay the chart, I did that like so:
.highcharts-container .chart-drag-handle {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 100;
}