How can I display a tooltip on an HTML "option" tag?

html

responsive-design

css

javascript

byAnton Shumikhin·Feb 9, 2025

Want to display tooltips for options within a dropdown? You'll have to venture outside of traditional <select> and <option> tags, and opt for a custom dropdown using a JavaScript and CSS combo. Here's a quick example:

<div class="dropdown">
  <div class="dropdown-trigger">Choose an option</div>
  <!-- They said options, not good options 😉 -->
  <div class="dropdown-content">
    <div class="option" data-tip="Tooltip for First">First</div>
    <!-- Second option, because nobody likes being first 😊 -->
    <div class="option" data-tip="Tooltip for Second">Second</div>
  </div>
</div>

.dropdown-content .option:hover:after {
  content: attr(data-tip); /* Yeah, we're using CSS for content. Rebel, aren't we? 😎 */
  position: absolute;
  top: 100%;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

document.querySelector('.dropdown').addEventListener('click', function() {
  // It's alive!! 😈
  this.classList.toggle('active');
});

When you interact with the .dropdown, tooltips appear on hover, styled and positioned with CSS. JavaScript controls the dropdown's visibility, ensuring we have tooltips for each option, without relying on the unsupported <option> title attributes.

Why the old ways aren't the best ways

Ever attempted to use a title attribute for tooltips? It comes with limitations, mainly within the <option> elements of a <select> tag. The display of these tooltips can be inconsistent across different browsers and they lack customization capabilities. Enhancing user experience necessitates a more robust approach, such as building a custom dropdown as shown in the fast answer.

Accessibility and browser-friendliness

In a world aiming for equal access, ARIA attributes can help ensure your tooltips are accessible to assistive technologies. It's also crucial to make your tooltips keyboard-friendly, not just hover-dependent.

For cross-browser compatibility, avoid relying solely on browser-specific pseudo-events, like mouseenter and mouseleave. While they're exceptionally well-supported in Firefox, the title attribute doesn't work consistently across browsers for <option> elements within a <select> menu. So, always test your solution across multiple engines like IE, WebKit, and Gecko.

There may be cases where switching UI elements might improve user experience compared to tooltips. For instance, consider using a jQuery UI slider or radio buttons. These options not only offer more customization but radically improve appearance and interaction of the menu options.

In the age of advanced web practices, a myriad of methods exist to create custom tooltips. JavaScript libraries like Tippy.js offer a ready-made solution with significant customization options. Another potential solution includes using hidden iframes for tooltips in older versions of IE, but it does come with potential accessibility issues and increased complexity.

CSS offers similar possibilities through pseudo-elements (::before, ::after) which can serve for customized positioning and styling, providing control over the tooltip's appearance and behavior. But bear in mind, they have limitations when dealing with interactive content.

Utilize all that modern CSS has to offer, including structures like flexbox or CSS grid to make your dropdown responsive, ensuring it adapts to varying screen sizes and devices.

Simplify markup: Strive for clean, semantic HTML using data attributes for storing tooltip text.
Guide user choices: Present tooltips as informative guides, ensuring each tooltip is concise and crystalline.
Incremental enhancement: Begin with a basic HTML structure, then add on the sprinkles with CSS and JS, ensuring even if JavaScript fails, your solution is still usable.