Question

我正在使用multiselect和自定义renderLabel函数进行反应Sematic-UI Dropdown，我想向这些标签添加工具提示/弹出窗口，以显示该标签所代表的项目的其他详细信息。我有一个大概的想法，我怎么能做到这一点，但是我首先在这里问是否有人已经这样做或类似的事情并且想分享知识。

http://react.semantic-ui.com/modules/dropdown/

当前我有以下代码：

renderLabel = (label) => {
return({
    color: 'teal',
    content: `${label.value}`,
    icon: 'user'
})}

，它看起来像：

我想我需要做类似的事情：

renderLabel = (label) => {
return({
    color: 'teal',
    content: `${label.value}`,
    icon: 'user'
    description: 'this is tooltip text...'
})}

制作描述道具的老式CSS工具提示，例如：

[description] {position: -ms-device-fixed;}

[description]:before {
    content:'';
    /* hides the tooltip when not hovered */
    display:none;
    content:'';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    position:absolute;
    top:30px;
    left:35px;
    z-index: 2;
    font-size:0;
    line-height:0;
    width: .71428571em;
    height: .71428571em;}

[description]:after {
    display:none;
    content:attr(description);
    position:absolute;
    top:35px;
    left:0px;
    padding:5px 10px;
    background: #fff;
    color: rgba(0,0,0,.87);
    z-index:9;
    font-size: 14px;
    line-height: 1.4285em;
    white-space:nowrap;
    word-wrap:normal;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;}

[description]:hover:before,[description]:hover:after {
            display:block;}

但这是不切实际的且经过硬编码的，sematic-ui中已经包含popup模块，但是我不知道如何在此处实现。

Answer 1

renderLabel={(a, b, c) => {
                return (
                  <Popup
                    content={<div>Whatever i want here</div>}
                    eventsEnabled={true}
                    on="click"
                    onClose={() => setOpen(false)}
                    onOpen={() => setOpen(true)}
                    open={open}
                    trigger={<Label content={a.text} {...c} />}
                  />
                );
              }}

您将需要改进setOpen方法以仅打开您要打开的弹出窗口，也许传递一些ID

在鼠标悬停时反应Sematic-UI Dropdown renderLabel弹出窗口/工具提示

1 个答案: