✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

DCC.Link Title style

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

Anyone have any ideas?

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; */
  }

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?

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.