React Sematic-UI Dropdown renderLabel всплывающая подсказка / всплывающая подсказка при наведении мыши - PullRequest
Новая
       26

React Sematic-UI Dropdown renderLabel всплывающая подсказка / всплывающая подсказка при наведении мыши

0 голосов
/ 31 августа 2018

Я реагирую на выпадение Sematic-UI с помощью функции multiselect и пользовательской функции renderLabel. Я хочу добавить всплывающую подсказку / всплывающее окно к этим меткам, которые показывают дополнительную информацию об элементе, который представляет метка. У меня есть приблизительное представление о том, как я мог бы это сделать, но сначала я спрашиваю, кто-то уже сделал это или что-то подобное и хочет поделиться знаниями.

http://react.semantic -ui.com / модули / выпадающий / Picture of renderLabel function on react sematic-ui website

В настоящее время у меня есть этот код: 

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

и выглядит так: enter image description here

Я полагаю, мне нужно сделать что-то вроде: 

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

и создайте подсказку для старой школы css из описания prop, что-то вроде: 

[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 , но я не могу понять, как это реализовать здесь.

...