How can you recreate with javascript a dropdown with a side "tooltip" description like Microsoft Excel does? What I'm trying to obtain is this:
Is there a library already that could handle this? It doesn't necessarily have to be a dropdown component specifically. In fact, something like excel which opens the list on click without having the UI of a dropdown would be better.
I had hoped we could use a datalist, but there are no tooltip options there
This does alas not work
<input list="fxlist">
<datalist id="fxlist">
<option value="SUM" title="Adds numbers in a range"></option>
<option value="SUMIF" title="Adds cells that meet a condition"></option>
</datalist>Here is a workaround When using the data-list element is there a way to show tool-tips for each option which needs the inline script moved to a script tag.
There are a couple of ways you could do this to create that excel style type dropdown with the function name along with a short description.
The easiest way would be, is to build a small custom suggestion box using plain HTML, CSS & Javascript. You could position it right under the input so that it shows matching items as you are typing. Then each item can display the name on one side and the description on the other and also then you can add simple keyboard navigation to make it feel like excel.
You could create an object and store functionnames along with their text in it - SUM: 'Add all numbers in a range of cells'Then when user types in the input the it would check the text by matching it with Tips object you created, if it will find a match the tooltip text will be updated. The tooltip will act like a hidden div, only visible when a match is found.
Another option would be, is to use an existing autocomplete/tooltip library like Tippy.js or a lightweight autocomplete plugin and customize it to show both text and description together.
•
Tippy.js is best for creating tooltips for situations like this.
Basically you can attach tooltips to your html elements like this:
(A single dropdown item)
<li class="menu-item" data-tippy-content="Copy selected text">Copy</li>
(Binding such element to tippy)
tippy('.menu-item', {
placement: 'right',
delay: [100, 50],
arrow: true,
theme: 'light-border',
});
Full code:
const btn = document.getElementById('dropdownBtn');
const menu = document.getElementById('dropdownMenu');
btn.addEventListener('click', () => {
menu.classList.toggle('open');
});
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!btn.contains(e.target) && !menu.contains(e.target)) {
menu.classList.remove('open');
}
});
// Initialize tooltips on all menu items
tippy('.menu-item', {
placement: 'right',
delay: [100, 50],
arrow: true,
theme: 'light-border',
});body {
font-family: system-ui, sans-serif;
padding: 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
cursor: pointer;
}
.menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
display: none;
list-style: none;
margin: 0;
padding: 6px 0;
width: 180px;
z-index: 10;
}
.menu-item {
padding: 8px 12px;
cursor: pointer;
}
.menu-item:hover {
background: #f3f4f6;
}
.menu.open {
display: block;
}<title>Tippy.js Dropdown with Tooltips</title>
<!-- Tippy.js and Popper.js (required) -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
<h2>Dropdown with tooltips using Tippy.js</h2>
<div class="dropdown"><button class="dropdown-button" id="dropdownBtn">Select Action ▾</button>
<ul class="menu" id="dropdownMenu">
<li class="menu-item" data-tippy-content="Copy selected text">Copy</li>
<li class="menu-item" data-tippy-content="Paste from clipboard">Paste</li>
<li class="menu-item" data-tippy-content="Delete the selected item">Delete</li>
<li class="menu-item" data-tippy-content="Rename this item">Rename</li>
</ul>
</div>Not the same design but the browser offers you title
<select>
<option value="test" title="Some tooltip value one">Val 1</option>
<option value="test" title="Some description for two">Val 2</option>
</select>