I've got Uncaught ReferenceError: options is not defined.
Here is the code:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').qtip({
content: {
title: {
text: 'text',
button: 'close'
},
text: 'asfaf'
},
hide: {
fixed: true,
delay: 300
},
position: {
my: 'left center',
at: 'right center',
target: 'event'
}
});
});
You can also visit http://jsfiddle.net/H4aTZ/2/ .
Apparently there is a problem regarding the title and position working together. Probably they are going to release a update soon.
Meanwhile, if you use nightly version it actually works :)
http://qtip2.com/v/nightly/
Related
I am trying to show a qtip when the user right-clicks on a node using the following code:
cy.on("cxttap", "node", function (evt) {
evt.cyTarget.qtip({
content: {
text: "test"
}
});
});
When I right-click a node no tooltip is shown, but as soon as I left-click on the same node then the tooltip shows.
I have made sure that cytoscape-qtip is working and I have not added any event handlers for the click or tap events.
qTip handles events itself, so you have to specify something like cxttap for the show event. If you want to write your own listeners, like you have above, then your call to qtip will need a call to the qtip API to manually show.
Set show property for right click
cy.elements().qtip({
content: '<p> [SUM Outgoing call :42, THUVAPPARA</p><button id="add-to-report" class="btn btn-success">Add to report</button><br><button class="btn btn-danger">Remove</button>',
show: { event: 'cxttap' },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
How to keep all the qtips inside a container (I have already tried position.container, position.viewport and position.adjust.method) without any luck, my best guess is that I am not using them correctly.
Update:1 I have created a sample app with more details on below url
http://secure.chiwater.com/CodeSample/Home/Qtip
Update:2 I have created jsfiddle link too. http://jsfiddle.net/Lde45mmv/2/
Please refer below screen shot for layout details.
I am calling the area shown between two lines as $container in my js code.
So far I have tried tweaking viewport, adjust method but nothing helped. I am hoping this is possible and I would greatly appreciate any help.
Below is my javascript code which creates qtip2.
//Now create tooltip for each of this Comment number
$('#cn_' + num).qtip({
id: contentElementID,
content: {
text: .....
var $control = $('<div class="qtip-parent">' +
' <div class="qtip-comment-contents">......</div>' +
' <div class="clearfix"></div>' +
' <div class="qtip-footer"><span class="qtip-commenter">...</span><span class="pull-right">...</span></div>' +
'</div>'
);
return $control;
},
button: false
},
show: 'click',
hide: {
fixed: true,
event: 'unfocus'
},
position: {
my: 'top right',
at: 'bottom right',
target: $('#cn_' + num),
container: $container,
//viewport: true,
adjust: { method: 'shift none' }
},
style: {
tip: {
corner: true,
mimic: 'center',
width: 12,
height: 12,
border: true, // Detect border from tooltip style
//offset: 25
},
classes: 'qtip-comment'
},
events: {
show: function (event, api) {
...
},
hide: function (event, api) {
...
}
}
});
Example of jalopnik page which shows what I am looking for (FWIW jalopnik example doesn't use qtip2).
I don't think qtip API supports this functionality. I ended up re-positioning the tooltip on visible event.
I have updated the demo page and jsfiddle link below is code for doing this.
events: {
visible: function (event, api) {
var $qtipControl = $(event.target);
$qtipControl.css({ 'left': contentPosition.left + "px" });
var $qtipTipControl = $qtipControl.find(".qtip-tip");
var $target = api.get("position.target");
$qtipTipControl.css({ "right": 'auto' });
//I am using jquery.ui position
$qtipTipControl.position({
my: "center top",
at: "center bottom",
of: $target
});
}
}
Problem with this approach is that there is noticeable jump when I re-position the qTip. But in lack of any other option for time being I will settle with this.
The ideal approach would be to allow callback method thru position.adjust currently it only supports static values for x and y, if a method was allowed here it would make things much smoother.
Part I
I am finding it difficult to replicate the functionality of cytoscape.js-qtip in my code.
Here is the JavaScript Code:
$(function()
{
$('#cy').cytoscape
({
style: cytoscape.stylesheet()
.selector('node').css({'content': 'data(name)'})
.selector('edge').css({'target-arrow-shape': 'triangle'})
.selector(':selected').css({'line-color': 'black'})
elements: {
nodes: [
{ data: { id: '1', name: '1' } },
{ data: { id: '2', name: '2' } },
],
edges: [{ data: { source: '1', target: '2' } }]
},
layout: { name: 'grid'},
ready: function()
{
window.cy = this;
cy.panzoom({});
cy.cxtmenu
({ commands:[{ content: '<span class="fa fa-flash fa-2x"></span>',
select: function() {console.log( this.id() );}
},
{ content: '<span class="fa fa-star fa-li "></span>',
select: function(){ console.log( this.data('name') );}
},
{ content: 'Text',
select: function(){ console.log( this.position() );}
}
]});
cy.elements().qtip
({
content: function(){ return 'this is tool tip for ' + this.id() },
position: { my: 'top center',at: 'bottom center'},
style: {classes: 'qtip-bootstrap',tip: {width: 16,height: 8}}
});
cy.qtip
({
content: 'tool tip about the core of the layout',
position: { my: 'top center', at: 'bottom center'},
show: { cyBgOnly: true},
style: {classes: 'qtip-bootstrap',tip: {width: 16,height: 8}}
});
}
});
});
I have already gone through these threads:
displaying qtip hover on outer nodes of cytoscape.js graph
how to use tooltip javascript library qtip.js together with cytoscape.js
how to add tooltip on mouseover event on nodes in graph with cytoscape.js
referencing cytoscape elements from external code
cytoscape.js force-directed layouts and node placement
Errors shown in Browser Console:
TypeError: qtip.$domEle.qtip is not a function
File : cytoscape.js-qtip
Line : 88
Col : 1
Code : qtip.$domEle.qtip( opts );
Part II
Also when I am trying the example provided over here, I see no qtip on tapping.
Note: I tried on both Mozilla Firefox & Google Chrome.
And encountered the following Errors in the Browser Console:
Mozilla Firefox
GET http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js
[HTTP/1.1 503 Service Unavailable 0ms]
TypeError: qtip.$domEle.qtip is not a function
File : cytoscape.js-qtip
Line : 97
Col : 6
Google Chrome:
GET https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/70964f0306e770837dbe2b81197c12fdc7804e38/cytoscape-qtip.js runner-3.25.19.min.js:1
TypeError: Object [object Object] has no method 'qtip'
at HTMLDocument. (http://null.jsbin.com/runner:27:12)
at j (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:27244)
at Object.k.fireWith [as resolveWith] (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:28057)
at Function.m.extend.ready (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:29891)
at HTMLDocument.J (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:30257) runner-3.25.19.min.js:1
Uncaught TypeError: Object [object Object] has no method 'qtip' runner:27
(anonymous function) runner:27
j
k.fireWith
m.extend.ready
Answer to Part I
The actual mistake was in the order of importing of JavaScript within the HTML file.
Mistake:
<script src="jquery.qtip.js"></script>
<script src="jquery-2.0.3.js"></script>
Correction:
<script src="jquery-2.0.3.js"></script>
<script src="jquery.qtip.js"></script>
Conclusion:
Correct Order of importing
jquery-2.0.3.js
jquery.qtip.js
Reason:
The order of importing/ loading is important as jquery.qtip.js is dependent on jquery-2.0.3.js.
For better understanding:
Read : cytoscape.js-qtip#description
When hovering over the outer nodes of graph in Cytoscape.js, the qTip dialog is not displayed.
Is there anyway to display the qTip bubbles upon hovering on an outer node? I can have the qtip popup on nodes in the upper half but not much along the sides of the graph. Especially towards the bottom half.
cy.elements('node').qtip({
id: function() {
return this.data('id');
},
content: function() {
return this.data('name') + '<br /><em>$' + this.data('weight') + '</em>';
},
position: {
my: 'bottom right',
viewport: $(etl_cyto_div),
adjust: {
cyViewport: true,
method: 'flip none'
}
},
show: {
cyBgOnly: false
},
hide: {
cyBgOnly: false,
cyViewport: true,
delay: 100
},
style: {
classes: 'qtip-tipsy',
tip: {
width: 16,
height: 8
}
}
});
I suspect your options may be causing the issue. Because this extension is a relatively thin wrapper around qtip, you just use the qTip API and options.
Try leaving options.position.adjust.method default
Try a more permissive options.position.adjust.method; see qtip docs
adjust.cyViewport is expensive (especially on touch) and can be buggy depending on the version of qtip used.
Try all defaults and see if you can reproduce your issue with the events you want. If not, then the issue is due to the set options. If so, please file your example code in an issue
I am developing a NodeJS app using Express 3.0 with Swig as my template engine. What I would like to accomplish is the passing of render arguments to the next route. I want to this because I have certain site components which exist on every single page of my site (sidebar, navbar, footer, etc). Each and every one of these components has widgets and links that toggle on and off. Right now I am doing the following to toggle these widgets:
response.render('network.html', {
activeTab: 'network',
username: request.session.username,
bread_current: 'Network',
page_title: 'Your Network',
page_subtitle: 'Mordrum',
widgets: {
navbar: {
chats: {
enabled: true,
color: 'blue',
icon: 'chatbubble'
}, messages: {
enabled: true,
color: 'red',
icon: 'mail'
}, users: {
enabled: true,
color: 'green',
icon: 'person'
}
}
}
})
There is a lot of arguments there (within the widgets object) that I end up repeating numerous times within my code (once for each route). I was wondering if there is a way to pass args to the next route.
If the data is static (it doesn't change over the course of running your app), use app.locals to store it. Any data stored in there will automatically become available to any templates:
app.locals.widgets = {
navbar: {
chats: {
enabled: true,
color: 'blue',
icon: 'chatbubble'
}, messages: {
enabled: true,
color: 'red',
icon: 'mail'
}, users: {
enabled: true,
color: 'green',
icon: 'person'
}
}
};
If the data does change, use res.locals instead. Any data stored there will also be available for any templates, but only during the lifetime of a single request. Any middleware can also access it (and change it if necessary).
The express way of doing this is to set them on res. Presumably you have a Widget1 middleware. That will set res.widget1.options and then call next(). Then another middleware will set res.widget2.options, and so on.