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
>>>>>>>
>>>>>>
>>>>>
>>>
>
