DCC.Link Title style

Dash Python
1

Does anyone know how to style the tooltip on the title of a DCC.Link? I have tried tooltip, a.tip, etc without luck.

2

Anyone have any ideas?

3

I’m not sure if I understand your question correctly. You are trying to change the style of link tooltip, correct?

You can try bootstrap component: https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tooltip/

# python file
import dash_bootstrap_components as dbc

dcc.Link(
  "LINK",
  id="link",
  href="/",
),
dbc.Tooltip("This is the link", target="link"),

# css file in your /assert 
.tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.07em;
    font-style: normal;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    /* ... */
  }
  .tooltip-inner {
    max-width: 1.36rem;
    padding: 0.01rem 0.04rem;
    color: #000;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
    /* border: 1px solid #000; */
  }
4

Thanks for the response. When using the title attribute on a DCC.Link, a tooltip is displayed which is basic with white background and black text and border. I would like that to be styled differently. Is that possible?

5

Never try this before, sorry, I’m not sure about that. The dcc.Link actually is an implementation of html’<a>, so you might want to look for how to change the styling on html <a> tooltip. Also, if you use chrome inspect the tooltip element, you can find its classname, then you can overwrite its css.