# Hover function not fully worked in a customized component

**URL:** <https://community.plotly.com/t/hover-function-not-fully-worked-in-a-customized-component/9946>\
**Category:** Dash Python\
**Created:** [April 26, 2018, 11:14pm UTC](https://community.plotly.com/t/hover-function-not-fully-worked-in-a-customized-component/9946 "2018-04-26T23:14:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![discbot](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/discbot/32/2958_2.png) [@discbot](https://community.plotly.com/u/discbot)\
**Post date:** [April 26, 2018, 11:14pm UTC](https://community.plotly.com/t/hover-function-not-fully-worked-in-a-customized-component/9946/1 "2018-04-26T23:14:44Z")

</div>

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](https://github.com/Lchiffon/wordcloud2)  
[wordcloud2.js](https://github.com/timdream/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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/7ae1e669e4b06825b365ca6a3ec1a2ed411284c6.png)  
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](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.