Adjust the height of html table tooltips

[hbalp]

Hello, first I would like to thank you for this great library

Problem

I am trying to use the tooltip feature to display some more information on nodes and edges on user click request, but don't know how to adjust the height of the tooltip box to its real content. Indeed the tooltip box size is to big and begins with an empty region. It's sometime impossible to read its usefull content.

Proposed Solution

I have no idea yet to solve this problem

Additional context

In order to reproduce the problem, I have just tried to modify a little the library provided tooltip example by replacing the tooltip = 'a' letter of node a by a simple html table containing two parameters and one uri. The modified example is attached as a Jupyter Notebook .ipynb file. The resulting tooltip box is shown in the attached .png screen capture.

Many thanks in advance for your help

Best regards, Hugues B

cyto_html_Tooltips example.ipynb.gz

[ianhi]

Hi @hbalp can you please post a small code snippet in the issue so it's easy for everyone to copy paste and try this out? It's ok if its a bit long, it just makes it much easier for us to play around with your example. You can format code by putting inside a code block with backticks:

see: https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax#quoting-code

As a first guess I'd imagine that to solve this someone will need to do some reading through the tippyjs documentation. That's the library that's used to generate the tooltip, and we are on version 5.2.1 https://atomiks.github.io/tippyjs/v5/html-content/

[ianhi]

Also! Thanks for opening this issue, once we figure this out this will be a great thing to include in the docs

[hbalp]

import ipycytoscape
import pandas as pd

a = { 'param1' : 'value1', 'param2' : 'value2', 'uri': 'https://someuri.example.com' }
df = pd.DataFrame(data = [a])
a_tooltip = df.transpose().to_html(render_links = True)

data = {
    'nodes': [
            { 'data': { 'id': '1', 'tooltip': a_tooltip } },
            { 'data': { 'id': '2', 'tooltip': 'b'} },
            { 'data': { 'id': '3', 'tooltip': 'c' } }
    ],

    'edges': [
            {
                'data': {
                    'source': '1',
                    'target': '2',
                    'tooltip': '4'
                }
            },
            {
                'data': {
                    'source': '1',
                    'target': '3',
                    'tooltip': '6'
                }
            }
    ]
}

cytoscapeobj = ipycytoscape.CytoscapeWidget(nodeSpacing=10)
cytoscapeobj.graph.add_graph_from_json(data)
cytoscapeobj.set_tooltip_source('tooltip')

# Try clicking on the nodes in the graph below. When you click the associated tooltip will show up.

display(cytoscapeobj)

[Missclicker]

Hi @hbalp, I believe the problem appears due to tooltip formatting in the JS module which renders the tooltip. It inserts <br> tag for every line you feed to it. So the workaround for you will be to remove all the \n in the HTML table code:

import ipycytoscape
import pandas as pd

a = { 'param1' : 'value1', 'param2' : 'value2', 'uri': 'https://someuri.example.com' }
df = pd.DataFrame(data = [a])
a_tooltip = df.transpose().to_html(render_links = True, border=3)
a_tooltip = a_tooltip.replace('\n','').replace('<th>', '<th style="color:white">').replace('<td>', '<td style="color:white">')

data = {
    'nodes': [
            { 'data': { 'id': '1', 'tooltip': a_tooltip} },
            { 'data': { 'id': '2', 'tooltip': 'b'} },
            { 'data': { 'id': '3', 'tooltip': 'c' } }
    ],

    'edges': [
            {
                'data': {
                    'source': '1',
                    'target': '2',
                    'tooltip': '4'
                }
            },
            {
                'data': {
                    'source': '1',
                    'target': '3',
                    'tooltip': '6'
                }
            }
    ]
}

cytoscapeobj = ipycytoscape.CytoscapeWidget(nodeSpacing=10)
cytoscapeobj.graph.add_graph_from_json(data)
cytoscapeobj.set_tooltip_source('tooltip')

# Try clicking on the nodes in the graph below. When you click the associated tooltip will show up.

display(cytoscapeobj)

Gives me a fine table:

PS: Is there a way to control the tooltip background color (yes, I can add style to the table, but those parts which are not in the table are using dark grey, which is far from ideal for me)?