如何為語義UI React中的每個數據列表選項元素應用工具提示

Question

import { Input } from 'semantic-ui-react';

  <div>
    <Input list='lists' placeholder='Choose language...' />
    <datalist id='lists'>
      <option value='brandname' />
      <option value='company' />
      <option value='count' />
    </datalist>
  </div>

我正在關注語義UI React的官方文檔以選擇一個選項，我想在右側為每個選項應用工具提示

Answer 1

考慮一下：

import { Popup } from 'semantic-ui-react';


  <div>
    <Input list='lists' placeholder='Choose language...' />
    <datalist id='lists'>
      <Popup content='This is the brand name' trigger={<option value='brandname' />} />
    </datalist>
  </div>

為所有option元素應用Popup 。

文獻資料