0

我想为使用 react-tooltip 的每个选项显示工具提示，我尝试了下面的代码，该代码可以很好地在鼠标悬停时显示工具提示，但是在 keydown 和 keyup 箭头上它不起作用，因为焦点永远不会出现在内部子 div 上，它我创建如下...在这里，我使用工具提示 div 更新选项

updatedOptions = updatedOptions.map((option) => {
    return {
      value: option.value,
      label: (
        <>
          <ReactTooltip
            role="tooltip"
            className="cb-select-tooltip"
            type="info"
            place="right"
            effect="solid"
            id={option?.value}
          />
          <div
            data-for={option?.value}
            data-tip={option?.tooltipContent}
            data-event="mouseover focus"
            data-event-off="mouseout blur"
            aria-label="option"
            className="select-option"
            ref={this.selectOption}
            role="button"
            tabIndex="0"
          >
            {option?.label}
          </div>
        </>
      ),
    };
  });

总是有一个父 div creted，`

<div role="listbox" id="react-select-2-menulist">
  
  <div class="select__option css-3dmylm-option" id="react-select-2-option-0" tabindex="-1">
    <div class="__react_component_tooltip place-right type-dark " id="" role="tooltip" data-id="tooltip"></div>
    <div
      data-for=""
      data-event="mouseover focus keydown"
      data-event-off="mouseout blur keyup"
      aria-label="option"
      role="button"
      tabindex="0"
      class="select-option"
    ></div>
  </div>
  <div class=select__option css-3dmylm-option" id="react-select-2-option-1" tabindex="-1">
    <div
      class="__react_component_tooltip place-right type-info select-tooltip"
      id="<"
      role="tooltip"
      data-id="tooltip"
      style="left: 270px; top: 174px;"
    >
      Less than
    </div>
    <div
      data-for="<"
      data-tip="Less than"
      data-event="mouseover focus keydown"
      data-event-off="mouseout blur keyup"
      aria-label="option"
      role="button"
      tabindex="0"
      class="select-option"
    >
      &lt;
    </div>
  </div>
`

我的问题是，我们可以在修改选项时控制那个外部 div HTML。或者请建议我是否遵循错误的方法。

4

0 回答 0