show a label when hovered in a particular option in select

Question

I have a select input with a couple of options my intention is to show a pop up label with some data when the option is hovered /applied by the user my code snippet is

<span>
        <button className='dashboard-border'>
          <select
          className='dashboard-button-report'
          id="page-size" onChange={changeFilter} value={filters}>
          <option key="tWeekBar" value="thisWeek" selected={true}>This Week</option>
          <option key="lWeekBar" value="lastWeek">Last Week</option>
          <option key="tMonthBar" value="thisMonth" >This Month</option>
          <option key="lMonthBar" value="lastMonth" >Last Month</option>
          <option key="tYearBar" value="thisYear" >This Year</option>
          <option key="lYearBar" value="lastYear" >Last Year</option>
          <option key="bwDatesBar" value="betweenDates" onMouseEnter={()=>function(){console.log("hello")}} >Between Dates</option>
          </select>
        </button>
        </span>

for start i was trying to get a console output when the option Between dates is hovered upon from the select options but i was unsuccessful.what is wrong with this approach?

score 1 · Accepted Answer · answered Apr 03 '23 at 08:01

The issue here is that you're trying to add an onMouseEnter event to the option element, which is not supported by HTML. You can try to use the onMouseEnter event to the select element and check for the currently selected option dynamically. This should make it work for:

<span>
  <button className='dashboard-border'>
    <select
      className='dashboard-button-report'
      id="page-size"
      onChange={changeFilter}
      value={filters}
      onMouseEnter={() => {
        const selectEl = document.getElementById('page-size');
        const selectedOption = selectEl.options[selectEl.selectedIndex];
          console.log('hello',selectedOption);
      }}
    >
      <option key="tWeekBar" value="thisWeek" selected={true}>This Week</option>
      <option key="lWeekBar" value="lastWeek">Last Week</option>
      <option key="tMonthBar" value="thisMonth">This Month</option>
      <option key="lMonthBar" value="lastMonth">Last Month</option>
      <option key="tYearBar" value="thisYear">This Year</option>
      <option key="lYearBar" value="lastYear">Last Year</option>
      <option key="bwDatesBar" value="betweenDates">Between Dates</option>
    </select>
  </button>
</span>

score 0 · Answer 2 · answered Apr 03 '23 at 07:32

0

Did you try the onMouseEnter function in <select>?

answered Apr 03 '23 at 07:32

mahmutoz

131
1
7

show a label when hovered in a particular option in select

2 Answers2