Hover function not fully worked in a customized component

Dash Python
1

Hi, I am new to dash and react. If my description lack any details, please let me know.
I was developing applications in R Shiny. It has a neat wordcloud2 package which is based on the wordcloud2.js.
R Wordcloud2 package
wordcloud2.js

I am trying to create a dash core component based on the wordcloud2 R package, and I am having trouble to create a similar hover functionality.
The R package works like this:
it first draws the wordcloud on a canvas. Then when the mouse hovers over a word, a hover event is triggered to attach labels like the following to the canvas:

<div id="wcLabel" style="left: 527px; top: 150px; width: 156px; height: 32px;" hidden="true">
    <span id="wcSpan" data-l10n-args="{word:fall,count:6643}">fall: 6643</span>
</div>

hidden=“true” attribution will be removed during the hover events.

wcLabel, and wcSpan have the following style:

#wcLabel {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 4px 0 #008;
    padding: 2px;
    /*margin: -4px 0 0 -4px;*/
    pointer-events: none; }
  
#wcSpan {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    margin-top: 6px;
    padding: 0 0.5em;
    border-radius: 0.5em;
    white-space: nowrap; }

The above combination will create a hover effect like the picture:

hoverframe
hoverframe.png344×596 28.1 KB

Basiclly a shadowed frame and tooltip.
I am now able to create a wordcloud on canvas exactly like the R package. When hover event is triggered, my package is also able to attach labels to the canvas. The CSS file is also loaded checking from chrome develop tools.
But I can’t get the shadowed frame and tooltip.
My code is on Github: https://github.com/ssword/dash-wordcloud
Please refer to the develop branch for the latest code. It requires the wordcloud package from NPM.

I have been trying to find solutions to this problem for more than two days. Any help will be appreciated.
Again, I am new to this. I wish to contribute to the Dash community, please let me know if I wasn’t clear about a thing.

1 Like