Javascript: List of drop-down buttons. Onmousover show button description on right side

I have a list of buttons and buttons with drop-down menu.
When I place my mouse over each button, it shows a brief description of the button at the bottom of the list (see example).

Now it is working only for first level buttons but not for drop-down list items.

In summary, I would like to:

show description (onmouseover) of each item on the RIGHT from the list, as shown in the image (not at the bottom, like it is now)

show description (onmouseover) not just for first level buttons but also for items in the drop-down lists.

I would be very thankful for a working solution.

.element-1,
.element-2,
.element-3 {
  display: none;
}

.a-1:hover~.element-1 {
  display: block;
}

.a-2:hover~.element-2 {
  display: block;
}

.a-3:hover~.element-3 {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
  <font color="#909497">Drop-down Buttons list</font>
</p>
<div class="container" style="width: 350px; height: 22px;">
  <button title="Description 1" class="a-1" id="menu1" onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 68px;">Button 1</button>
  <div align="left" class="dropdown" style="width: 333px; height: 34px;">
    <button class="btn btn-default dropdown-toggle" id="menu1" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1 
         <span class="caret"></span></button>
    <ul title="Drop-down item 1 description" class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li class="a-2" role="presentation">
        <a tabindex="-1" class="a-2" href="https://link2.com/" target="_blank">Drop-down item 1</a></li>
      <li title="Drop-down item 2 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3 
         <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li title="drop-down item 3 description" class="a-2" role="presentation">
        <a tabindex="-1" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a></li>
      <li title="drop-down item 4 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 4 </a></li>
      <li title="drop-down item 5 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 5 </a></li>
      <li title="drop-down item 6 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a></li>
      <li title="Drop-down item 7 description" role="presentation">
        <a tabindex="-1" role="menuitem" href="#">Drop-down item 7</a></li>
    </ul>
  </div>
  <button title="Button 4 description" class="a-2" id="menu1" onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 34px;">Button 4</button><button title="Button 4 description" class="a-3" id="menu1"
    onclick="window.open(&#39;http://link.com&#39;, &#39;_blank&#39;)" type="button" style="width: 268px; height: 34px;">Button 5 </button>&#160;&#160;&#160;&#160;&#160;&#160;
  <div class="element-1" style="width: 350px;">
    <img width="45" height="45" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX2310920.jpg" data-themekey="#" alt="" />
    <br/>Button 1 description</div>
  <div class="element-2" style="width: 350px;">Button 4 description</div>
  <div class="element-3" style="width: 350px;">Button 5 description</div>
</div>

Hi @janiszandersons, well it’s a bit hard to help you here as there’s only some 3rd party JS in the code you posted… but a good approach would be to store the descriptions in a data-* attributes, and copy the current target’s value into an info box on mouse enter:

<ul class="dropdown">
  <li data-description="This is the first item">Item 1</li>
  <li data-description="This is not the first item">Item 2</li>
  <li data-description="This is not the first item either">Item 3</li>
</ul>
<div class="infobox"></div>    
const dropdown = document.querySelector('.dropdown')
const infobox = document.querySelector('.infobox')

dropdown.addEventListener('mouseover', ({ target }) => {
  infobox.textContent = target.dataset.description || ''  
})

dropdown.addEventListener('mouseout', ({ target }) => {
  infobox.textContent = ''  
})

Another approach using only CSS would be to put these descriptions as divs inside the li elements, and only show them on :hover but absolutely positioned to the right.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.