Tooltips jquery

Dash Python
1

Dear all,

I am trying to get jquery tooltips working with dash. In particular I would like to have tooltips with different widths.

The following fiddle illustrates what I am trying to do. I would like to target a specifc id and set the tooltip properties.

[http://jsfiddle.net/bjonen/4na2vkye/2/](http://Fiddle example)

When I target all elements the jquery tooltips show up nicely for both elements.

// myjavascript.js
$(document).ready(function(){
     $(document).tooltip();
});

But if I try to select just one I do not succeed. Both elements fall back to the standard html tooltip.

$(document).ready(function(){
     $("#myid2").tooltip();
});

Since the jsfiddle is working w/o a problem, I am suspecting there is some subtlety about the way dash works that I am not seeing. Any help will be much appreciated.

PS Here the corresponding dash app.

# app.py
import dash
import dash_core_components as dcc
import dash_html_components as html



external_scripts = [
    'https://code.jquery.com/jquery-3.3.1.min.js',
    'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js',
    ]
external_stylesheets = [
     '//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css'
    ]

app = dash.Dash(__name__, \
                external_scripts=external_scripts,
                external_stylesheets=external_stylesheets)


mytext = '''
Some text...
'''

layout = html.Div([
    html.Div(id='myid', children=['Some Text'], title=mytext),
    html.Div(id='myid2', children=['Some Text'], title=mytext)
])

app.layout = layout

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', debug=True, port=8050)
2

On the frontend, a Dash app is actually a React app. React, unfortunately, does play well with anything else manipulating the DOM, as you’re trying to do with jQuery.

You’ll either need to find a pure CSS/HTML option, or find a React component that you can convert into a Dash component.

3

Thanks a lot for the feedback. I will try other possibilities.

4

You can also try out dash-bootstrap-components. One of the components is a tooltip, I just tried it out and it works great!

Let me know how it works out.

3 Likes
5

This is a very interesting project. I am currently working with the standard dash stylesheet:
https://codepen.io/chriddyp/pen/bWLwgP.css

Just swapping in a bootstrap stylesheet changes my app quite a bit. While it seems possible to get the grid system alone, the other components are not so easily extractable, right?

I will definately give dbc a go and give feedback. Perhaps it is worth switching entirely.

6

If you really don’t want all of Bootstrap and just want the dbc.Tooltip, you could include only the Bootstrap tooltip styles by copying them into your own stylesheet, and then not linking to Bootstrap CSS.

1 Like
7

Thanks for the pointer!

8

Hi,
you can try to use visdcc.Run_js, and then you can run your $("#myid2").tooltip() in callback function. :slightly_smiling_face: