1

I have this html code:

<div class="side-tab">
    <div class="header">
        <!-- Header here -->
    </div>
    <div class="scrollable">
        <div class="side-container">
            <div id="item1" class="item">
                <!-- Here I have things of the item and button with tooltip on it -->
            </div>
            <div id="item2" class="item">
                <!-- Here I have things of the item and button with tooltip on it -->
            </div>
    </div>
</div>

The css of each class looks like this:

.side-tab {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.header {
    height: 30px;
    padding: 0 10px;
    align-items: center;
}

.scrollable {
    width: 450px;
    flex-grow: 1;
    overflow-y: scroll;
    direction: ltr;
    overflow-x: hidden;
    position: relative;
}

.side-container {
    width: 450px;
    padding 0 7px;
    direction: rtl;
    position: absolute;
    right: 0;
    padding-bottom: 500px;
}

.item {
    margin: 7px 0;
    bow-shadow: (something here);
    border-radius: 6px;
}

I have in each item a button with tooltip on it. That button is located in the left side of each item. The problem that I have is that this tooltip doesn't visible outside of the side-tab. It looks something like this:

enter image description here

And that wanted result is this: enter image description here

Pink: other container.
Black: side-tab.
Red: header.
Orange: scrollable.
Green: side-container.
Blue: item.
Purple: button.
Gray: tooltip.

I understand that the problem is with the overflow-x and overflow-y (when I remove them it looks good but I can't scroll and I have footer that has buttons to with tooltips and the tooltip show on the 'Other Container'). I checked out for solutions and found this: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

But nothing from there solved this. I am really need to solve it without a lot of changes.

Thanks in advance and sorry for the poor example and english.

Community
  • 1
  • 1
Sagie
  • 996
  • 3
  • 12
  • 25
  • You may want to start preparing for the case that this cannot be solved. Is there an example of this you've seen? Maybe you can email them and ask. – sheriffderek May 24 '17 at 17:27
  • I guess that this could be solved because the scroll makes this issue.. @sheriffderek – Sagie May 24 '17 at 17:46
  • What about adding the tooltip element to body instead of a parent div? This would also allow you to position the tooltip anywhere on the page and it is not restricted to overflow stuff of the enclosed element. – Stephan Köninger May 24 '17 at 17:59

0 Answers0