时间戳

首页 > 解决方案 > 如何在反应样式的组件中添加“标题”标签（用于工具提示）

css - 如何在反应样式的组件中添加“标题”标签（用于工具提示）

问题描述

我在我的反应应用程序中使用样式组件我想在我的样式组件上添加标题属性（用于工具提示）

我尝试使用包装器 div html 元素并在其上应用标题标签但无法做到，也尝试使用 css`` 样式的组件助手无法做到。

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>

标签： cssreactjs

解决方案

<FilterTitle>仍在渲染 a div，因此您可以将所需的任何属性直接放在该组件上，它们将被传递给 div：

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

推荐阅读