Colored Text is Hidden for Jupyter Notebooks

[loganriggs]

As shown in the image, the hovertip is hidden in jupyter notebooks.

It works as expected in Google Colab. text_neuron_activations() also works in both colab & jupyter notebooks.

I installed with:
pip install circuitsviz
OS: Linux
Python version: 3.10.9

[alan-cooney]

Hi @loganriggs - this could possibly be a theme issue. Can you try with the main VS code one?

I think it's because VS Code is built with JavaScript and there may be some z-index issues where the tooltip is underneath something else from your theme. It may also be the case that if we manually set a z-index it will be brought above anything hiding it.

[loganriggs]

Hey @alan-cooney , it is still covered for

• Dark (visual studio)
• Dark+ (default light)
• Light (visual studio)
• Light+ (default light)

Is there a way I could manually set the z-index to test it?

[loganriggs]

I got a friend to try on theirs and it does work for them.

I've reinstalled vscode & removed user settings, but it's still not working for me. Closing this for now.

[luciaquirke]

I'm experiencing this too!

[loganriggs]

@alan-cooney I think manually setting the z-index would work for the moment, but I don't know how to do that.

Could you provide code or links to show how to do it?

[alan-cooney]

In the two render functions at https://github.com/alan-cooney/CircuitsVis/blob/main/python/circuitsvis/utils/render.py - we could add "z-index: 999999;" to the style. However it's possible/likely that vscode themes also use "overflow: hidden;" for rendered blocks, so some wizardry (e.g. https://stackoverflow.com/questions/10446287/hovered-element-to-overflow-out-from-an-overflowhidden-element-css ) may also be needed.

[dtch1997]

I'm not 100% sure this is related, but I found out (through Claude) that the colored_tokens HTML isn't standard.

Div closure: Your div tags are self-closing (/>), which is not standard in HTML5. Try changing them to properly closed divs.

So instead of:

    html = f"""<div id="{uuid}" style="margin: 15px 0;"/>
    ... 

We should do:

   html = f"""<div id="{uuid}" style="margin: 15px 0;"></div> 

This fixed an unrelated issue for me when I was trying to render multiple lines at once.

[VictorMorand]

Had the same issue, fixed it in a hacky way by manually increasing margin after circuitsvis rendering so that the HTML frame is large enough to show the tooltip.

html = cv.tokens.colored_tokens(str_tokens,str_tokens)
html.cdn_src = html.cdn_src.replace("margin: 15px", "margin: 50px")
html