Thanks for sharing!
On Tue, Feb 23, 2016 at 8:54 PM Balachandar R.A. <balachandar...@gmail.com>
wrote:
> Hi
>
> The below code snippet helped. I could see the tooltip now.
>
> cy2.on('mouseover', 'node', function(event) {
> var node = event.cyTarget;
> node.qtip({
> content: 'hello',
> show: {
> event: event.type,
> ready: true
> },
> hide: {
> event: 'mouseout unfocus'
> }
> }, event);
> });
>
>
> I have the below headers in the beginning of my paragraph
>
>
> <script src="
> https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.6.1/cytoscape.min.js
> "></script>
>
> <link rel="stylesheet" type="text/css" href="
> http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css";>
>
> <script src="http://code.jquery.com/jquery-2.0.3.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>
>
>
> Hope this helps
>
>
> regards
> Bala
>
>
>
> On 19 February 2016 at 01:59, Corneau Damien <cornead...@gmail.com> wrote:
>
>> 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
>>>>>>>>
>>>>>>>
>>>>>>
>>>>
>>
>
