CODEWITHSUNDEEP
htmlcss
Len White
Len White

Reputation: 992

HTML: Having trouble getting tooltip overflow:visible to work with position:relative div

I have a div that needs to have relative positioning and limited width and height. I want scrollbars added if the content overflows. For this, I have style overflow:auto. This much works. Now I have a tooltip that I want to display when mousing over a target. I want the tooltip to display in its entirety, so it should display beyond the bounds of the enclosing div if necessary. For that I have the tooltip style overflow:visible. Problem is, the tooltip does not display beyond the bounds of the div. If I remove the positioning of the div, it works as expected: the div has the scrollbar, and the tooltip extends beyond the div. How can I get this to work when the div is relatively positioned? Any assistance would be appreciated.

        .tooltip {
            position: relative;
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: steelblue;
            color: yellow;
            border: solid;
            border-width: 1px;
            border-radius: 50%;
            text-align: center;
            vertical-align: central;
            cursor: help;
        }

            .tooltip:before {
                content: '?';
            }

            .tooltip + .tooltiptext {
                position: absolute;
                display: none;
                margin: 5px;
                padding: 5px;
                min-width: 200px;
                max-width: 400px;
                background-color: steelblue;
                color: #fff;
                text-align: left;
                border-radius: 6px;
                overflow: visible;
            }

            .tooltip:hover + .tooltiptext {
                display: inline;
            }


        .scrollIfNeeded {
            position: relative;
            left: 100px;
            top: 100px;
            overflow: auto;
            background-color: lightgoldenrodyellow;
        }    
<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
        <span class="tooltip"></span>
        <span class="tooltiptext">
            This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div. 
        </span>
        Scale: <input id="ScaleUpButton" type="text" /> This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. 
    </div>

Upvotes: 1

Views: 180

Answers (1)

RizkiDPrast
RizkiDPrast

Reputation: 1725

You need to add position:fixed; to fix that. try this one

.tooltip {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: steelblue;
  color: yellow;
  border: solid;
  border-width: 1px;
  border-radius: 50%;
  text-align: center;
  vertical-align: central;
  cursor: help;
}
.tooltip:before {
  content: '?';
}
.tooltip + .tooltiptext {
  position: absolute;
  display: none;
  margin: 5px;
  padding: 5px;
  min-width: 200px;
  max-width: 400px;
  background-color: steelblue;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  overflow: visible;
}
.tooltip:hover + .tooltiptext {
  display: inline;

/* here need to set position and width [optionally]*/
  position: fixed;
  max-width: 200px;
}
.scrollIfNeeded {
  position: relative;
  left: 100px;
  top: 100px;
  overflow: auto;
  background-color: lightgoldenrodyellow;
}
<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
  <span class="tooltip"></span>
  <span class="tooltiptext">
            This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div. 
        </span>
  Scale:
  <input id="ScaleUpButton" type="text" />This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
  This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
</div>

Upvotes: 1

Related Questions