相对于图标位置的div位置

Question

THE FIDDLE

When a user hovers over a chevron icon next to a name on my website a div appears with options.

The Problem : The names can have different lengths and I would like to display the div below the chevron no matter how long the name is.

Here is my code:

HTML

<div class='settings'><i class='icon ion-chevron-down'></i></div>
<div class='settings-wrapper'>
    <ul class='settings-bubble'>
        <li>Bearbeiten</li> 
        <li>Löschen</li>
    </ul>
</div> 

SCSS

// The chevron icon 
.settings {
    display: inline;
    position: relative;
    padding: .1em 0 0 .5em;
    opacity: 0; // I display the chevron on hover using jquery
}

// The options bubble
.settings-wrapper { 
    position: relative; 
}

.settings-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 .6em;
    opacity: 0;
    z-index: 9999;
    li {
        position: relative;
        display: block;
        a { float: left; }
    }
}

I would be very thankful for any kind of help!!

If I change left: 0 to right: 0 it looks like this:

Answer 1

In .settings-bubble change left: 0; into right: 0; and it will stick to the inner right side of the parent instead of the inner left.

EDIT: the trick is to add the div containing the bubble into the div containing the string of arbitrary length, and attach that bubble inside that div to the inner right-hand side, as illustrated by this fiddle .

Answer 2

When the icon is hovered, there is an event handler that displays the div. In that handler, you can inspect the x and y coordinates of the icon. When you display the div, you can modify its style to be positioned relative to the icon. For example:

 var chevron = document.getElementById('chevron'); var popup = document.getElementById('popup'); chevron.addEventListener('mouseover', function(e) { popup.classList.remove('hidden'); popup.style.left = e.target.offsetLeft + 'px'; }); chevron.addEventListener('mouseout', function(e) { popup.classList.add('hidden'); }); 

 .hidden { display: none; } #popup { position: absolute; border: 1px solid #000; } 

 <h1 contenteditable="true">Some long title <span id="chevron">></span></h1> <div id="popup" class="hidden">popup</div> 

I left the title editable so you can make it longer and see the popup change position.