CODEWITHSUNDEEP
cssreactjs
Eva Cohen
Eva Cohen

Reputation: 505

How to add 'title' tag (for tooltip) in react styled components

I use styled components in my react application I would like to add title attribute (for tooltip) applied on my styled component

I tried using a wrapper div html element and apply the title tag on it and could not do it, also tried with css`` styled components helper could not do it.

my styled components: (with ellipsis):
const FilterTitle = styled.div`
    display: inline-block;
    width: 100%;
    line-height: 40px;
    height: 40px;
    color: ${blackChosen};  
    font-family: Poppins;   
    font-size: 16px;    
    letter-spacing: 0.15px;  
    padding-left: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: ${props => (props.chosen) ? '500' : 'initial'};
`;

and:

<FilterTitle> I might be a long sentence shown with ... and the title tag should tooltip me</FilterTitle>

Upvotes: 2

Views: 4915

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

<FilterTitle> is still rendering a div so you can put any attributes you want directly on that component and they will be passed to the div:

<FilterTitle title="A long sentence, eh?">...

Upvotes: 1

Related Questions