Div is shown on Observable platform but not on my local page after embedded.

Community Help
1

Hello, everyone! I got a project based on the Disjoint Force-Directed Graph. Here is my code: https://observablehq.com/@iris990314/interactivity

I attached a detailed table for each node, and the graph is good. But after I embedded it into my local html file. The detailed table is gone. But I can see the text of the table is showing at the end of the page.

Could anyone please help? Appreciate any suggestions.

2

hi @Iris I see that your tooltip is using css styles defined on the last cell, that anonymous cell has to be referenced in other parts of your notebook or you can name that cell and select it to embed.

if you don’t want to attach that cell to your embed, you can aways add the styles direct into your code for example

    div.attr("class", "tooltip");
    div.node().style.cssText = `
        position: absolute;
        width: auto;
        height: auto;
        padding: 8px;
        background: #ddd;
        pointer-events: none;
        border: 1px solid #eee;
        border-radius: 10px;`;
1 Like
3

Hey! @radames Thank for answering. The problem is on “hover2” cell which controls the detail table appearing when the mouse hovering on the node. I do have a reference, div.attr(“class”, “tooltip”), in that cell. Just have no idea that the detail table is working on the web platform, but not on my local html after embedding.

Also I give the css cell a name, but embedding that cell is not working as well. Could you please help me to figure it out? It is my first time to use Observable.

Thank you so much.

4

Sorry @radames. It works! I just figured out that I have to republish the code to see the change. Thank you so much!!

1 Like