[SalesForce] CSS issue with ” slds-popover slds-popover_tooltip”

I used slds-popup in a table. And those popup contains multiselect picklist values options with break(<br/>). My problem is when popup values are more, then its going to the second column. Something is wrong with the position i believe.
enter image description here

when it has two options selected, then
enter image description here

As you can see when there are two options then pointer shifted down a little bit. Similarly when there are five or more options then its going to second column.

I hope i am clear with my issue here. I am not good in CSS. I tried changing position for those div. But its not working. 

<div id="red" style="float: left;width: 15px;height: 15px;margin: 2px;border: 1px solid rgba(0, 0, 0, .2);background:red;" onmouseover="{!c.redBlockOver}" onmouseout="{!c.redBlockOut}">
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-slide-from-top-to-bottom" role="tooltip" id="help" style="position: absolute; top: -35px; left: -5px;display:none;">
        <div class="slds-popover__body">
            <aura:unescapedHtml value="{!accWrp.redBlockStr}"/>
        </div>
    </div>
</div>

onmouseOver and onMouseOut i am hiding and showing second div. I am iterating over an account wrapper and "redBlockStr" is a string. It has optns with </br/> at the end.

I am not sure which properties i need to use, to solve this.

Any help will be appreciated.

Best Answer

The problem is your first DIV line needs to have "position:relative" and then keep your "position:absolute" in the second line like you have it. This will ensure that wherever the position needs to be, the background content will be static.

I had the same problem and fixed it like that.

Related Topic