I took a shot at it, and improved the code to make sure things would go
well.
However, I couldn't make it work.
All the libraries are included and both *qtip* and *cytoscape* are working
fine,
However *cytoscape.js-qtip *is not doing anything, even using `
cytoscape-qtip` in the console would throw an error
Here is my code in case:
%angular
<div id="cy"></div>
<style>
body {
font-family: helvetica;
font-size: 14px;
width: 100%;
height: 1000px;
}
#cy {
width: 100%;
height: 400px;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script>
//
// LOADING THE COMPONENT
//
// Include the component css
if (!jQuery("link[href$='jquery.qtip.css']").length) {
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", '//
cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.css');
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
// Remove some CSS from Zeppelin so that the component renders well
var id = document.getElementById("cy").parentElement.getAttribute('id');
document.getElementById(id).style.overflow = "visible";
// Load the js and render the component after
jQuery.when(
// Load the js
jQuery.getScript('//
cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.min.js',
function( data, textStatus, jqxhr ) {
console.log( jqxhr.status ); // 200
console.log( "Qtip Load was performed." );
}),
jQuery.getScript('//
cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.3/cytoscape.js', function(
data, textStatus, jqxhr ) {
console.log( jqxhr.status ); // 200
console.log( "Cytoscape Load was performed." );
}),
jQuery.getScript('//
cdn.rawgit.com/cytoscape/cytoscape.js-qtip/master/cytoscape-qtip.js',
function( data, textStatus, jqxhr ) {
console.log( jqxhr.status ); // 200
console.log( "CytoscapeQtip Load was performed." );
}),
jQuery("#cy").ready,
jQuery.Deferred(function( deferred ){
jQuery( deferred.resolve );
})
).done(function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function(){
console.log('ready yes');
},
style: [
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(name)'
}
},
{
selector: 'edge',
style: {
'width': 1,
'line-color': '#aaa',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry' } },
{ data: { id: 'e', name: 'Elaine' } },
{ data: { id: 'k', name: 'Kramer' } },
{ data: { id: 'g', name: 'George' } }
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'j', target: 'g' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' } },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'g', target: 'j' } }
]
},
});
// just use the regular qtip api but on cy elements
cy.elements().qtip({
content: function(){ return 'Example qTip on ele ' + this.id() },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
});
</script>
On Thu, Feb 18, 2016 at 9:50 AM, moon soo Lee <m...@apache.org> wrote:
> I tried a little more to make the qtip work, but no luck so for.
> Please share once you made it work.
>
> Thanks,
> moon
>
>
> On Thu, Feb 18, 2016 at 2:11 AM Balachandar R.A. <balachandar...@gmail.com>
> wrote:
>
>> Hi moon,
>> Thanks for the effort. I will check that. Initially, I just copied the
>> example demo code in a plain notepad and saved it as .html. When I opened
>> this file in the browser, I could see the tooltip exactly as explained in
>> the github sources.
>>
>> Now, when I ported this code in zeppelin, i could not see it working.
>> Perhaps, if you can replicate what I have done, you may observe few more
>> information. Nevertheless, I will come back to you once I see the error in
>> my side.
>>
>> Thanks
>> Bala
>>
>> On 18 February 2016 at 14:29, moon soo Lee <m...@apache.org> wrote:
>>
>>> With proper cytoscape-qtip address, i'm getting following error.
>>>
>>> Uncaught TypeError: cy.elements(...).qtip is not a function
>>>
>>> You can also see error in Developer console in your browser, when you
>>> run zeppelin-web in devmode.
>>>
>>> (see Run the application in dev mode
>>> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment
>>> for devmode)
>>>
>>> Thanks,
>>> moon
>>>
>>>
>>> On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. <
>>> balachandar...@gmail.com> wrote:
>>>
>>>> Hi moon,
>>>>
>>>> My bad. Here is the link
>>>> https://github.com/cytoscape/cytoscape.js-qtip.
>>>>
>>>> The whole cytoscape-qtip project is hosted here and you can find the js
>>>> file in the below link
>>>>
>>>>
>>>> https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js
>>>>
>>>> regards
>>>> Bala
>>>>
>>>>
>>>> Thanks
>>>>
>>>> On 18 February 2016 at 13:47, moon soo Lee <m...@apache.org> wrote:
>>>>
>>>>> Hi Bala,
>>>>>
>>>>> The file http://40.221.94.235/cytoscape-qtip.js looks like not
>>>>> accessible. Could you check if it is correct address?
>>>>>
>>>>> Thanks,
>>>>> moon
>>>>>
>>>>> On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <
>>>>> balachandar...@gmail.com> wrote:
>>>>>
>>>>>> I am trying reciprocate the example seen in the link
>>>>>> https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI
>>>>>> extension for cytoscape, As a standalone code, this works. But, when I
>>>>>> port
>>>>>> this code in zeppelin paragraph, I do not see the tooltip. Here is the
>>>>>> code I tested. Any hint will be highly appreciated. Thanks
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> %angular
>>>>>>
>>>>>> <meta name="viewport" content="width=device-width, user-scalable=no,
>>>>>> initial-scale=1, maximum-scale=1">
>>>>>>
>>>>>>
>>>>>>
>>>>>> <link rel="stylesheet" type="text/css" href="
>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css";>
>>>>>>
>>>>>>
>>>>>>
>>>>>> <script src="
>>>>>> https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
>>>>>> "></script>
>>>>>>
>>>>>> <script src="
>>>>>> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js
>>>>>> "></script>
>>>>>>
>>>>>> <script src="
>>>>>> http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js
>>>>>> "></script>
>>>>>>
>>>>>> <script src="http://40.221.94.235/cytoscape-qtip.js";></script>
>>>>>>
>>>>>> <div id="cy">
>>>>>>
>>>>>>
>>>>>>
>>>>>> <style>
>>>>>>
>>>>>> body {
>>>>>>
>>>>>>
>>>>>> font-family: helvetica;
>>>>>>
>>>>>>
>>>>>> font-size: 14px;
>>>>>>
>>>>>>
>>>>>> width: 100%;
>>>>>>
>>>>>>
>>>>>> height: 1000px;
>>>>>>
>>>>>> }
>>>>>>
>>>>>> #cy {
>>>>>>
>>>>>>
>>>>>> width: 100%;
>>>>>>
>>>>>>
>>>>>> height: 1000px;
>>>>>>
>>>>>>
>>>>>> position: absolute;
>>>>>>
>>>>>> left:
>>>>>> 0;
>>>>>>
>>>>>> top:
>>>>>> 0;
>>>>>>
>>>>>>
>>>>>> z-index: 999;
>>>>>>
>>>>>> }
>>>>>>
>>>>>> h1 {
>>>>>>
>>>>>>
>>>>>> opacity: 0.5;
>>>>>>
>>>>>>
>>>>>> font-size:
>>>>>> 1em;
>>>>>>
>>>>>> }
>>>>>>
>>>>>> </style>
>>>>>>
>>>>>>
>>>>>>
>>>>>> <script>
>>>>>>
>>>>>> $(function(){
>>>>>>
>>>>>> var
>>>>>> cy = window.cy = cytoscape({
>>>>>>
>>>>>>
>>>>>> container: document.getElementById('cy'),
>>>>>>
>>>>>>
>>>>>> ready: function(){
>>>>>>
>>>>>>
>>>>>> },
>>>>>>
>>>>>>
>>>>>> style: [ // the stylesheet for the graph
>>>>>>
>>>>>> {
>>>>>>
>>>>>> selector: 'node',
>>>>>>
>>>>>> style: {
>>>>>>
>>>>>> 'background-color': '#666',
>>>>>>
>>>>>> 'label': 'data(name)'
>>>>>>
>>>>>> }
>>>>>>
>>>>>> },
>>>>>>
>>>>>>
>>>>>>
>>>>>> {
>>>>>>
>>>>>> selector: 'edge',
>>>>>>
>>>>>> style: {
>>>>>>
>>>>>> 'width': 1,
>>>>>>
>>>>>> 'line-color': '#aaa',
>>>>>>
>>>>>> 'target-arrow-color': '#ccc',
>>>>>>
>>>>>> 'target-arrow-shape': 'triangle'
>>>>>>
>>>>>> }
>>>>>>
>>>>>> }
>>>>>>
>>>>>> ],
>>>>>>
>>>>>>
>>>>>> elements: {
>>>>>>
>>>>>>
>>>>>> nodes: [
>>>>>>
>>>>>>
>>>>>> { data: { id: 'j', name: 'Jerry' } },
>>>>>>
>>>>>>
>>>>>> { data: { id: 'e', name: 'Elaine' } },
>>>>>>
>>>>>>
>>>>>> { data: { id: 'k', name: 'Kramer' } },
>>>>>>
>>>>>>
>>>>>> { data: { id: 'g', name: 'George' } }
>>>>>>
>>>>>>
>>>>>> ],
>>>>>>
>>>>>>
>>>>>> edges: [
>>>>>>
>>>>>>
>>>>>> { data: { source: 'j', target: 'e' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'j', target: 'k' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'j', target: 'g' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'e', target: 'j' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'e', target: 'k' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'k', target: 'j' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'k', target: 'e' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'k', target: 'g' } },
>>>>>>
>>>>>>
>>>>>> { data: { source: 'g', target: 'j' } }
>>>>>>
>>>>>>
>>>>>> ]
>>>>>>
>>>>>>
>>>>>> },
>>>>>>
>>>>>> });
>>>>>>
>>>>>> //
>>>>>> just use the regular qtip api but on cy elements
>>>>>>
>>>>>>
>>>>>> cy.elements().qtip({
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> content: function(){ return 'Example qTip on ele ' + this.id() },
>>>>>>
>>>>>>
>>>>>> position: {
>>>>>>
>>>>>>
>>>>>> my: 'top center',
>>>>>>
>>>>>>
>>>>>> at: 'bottom center'
>>>>>>
>>>>>>
>>>>>> },
>>>>>>
>>>>>>
>>>>>> style: {
>>>>>>
>>>>>>
>>>>>> classes: 'qtip-bootstrap',
>>>>>>
>>>>>>
>>>>>> tip: {
>>>>>>
>>>>>>
>>>>>> width: 16,
>>>>>>
>>>>>>
>>>>>> height: 8
>>>>>>
>>>>>>
>>>>>> }
>>>>>>
>>>>>>
>>>>>> }
>>>>>>
>>>>>> });
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> });
>>>>>>
>>>>>> </script>
>>>>>>
>>>>>>
>>>>>>
>>>>>> regards
>>>>>>
>>>>>> Bala
>>>>>>
>>>>>
>>>>
>>
