Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show tooltip over overflow:hidden

I want to show tooltips next to items in a rather complex editor with custom scrolling. The tooltips should "escape" the container that has overflow: hidden set to limit the viewport.

Here is an example that shows the problem:

.container {
  border: 1px black solid;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.inner {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.column {
  background-color: #99FF99;
  padding: 25px;
}

.tooltip-container {
  position: relative;
}

.content {
  background-color: #9999FF;
  width: 50px;
  height: 50px;
}

.tooltip {
  z-index: 1;
  background-color: #FF9999;
  display: none;
  position: absolute;
  left: 100%;
  top: 0%;
  white-space: nowrap;
}

.tooltip-container:hover .tooltip {
  display: inline-block;
}
<div class="container">
  <div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            1
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 1
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            2
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 2
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            4
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 4
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            3
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 3
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            5
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 5
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            6
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 6
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            7
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 7
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            8
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 8
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            9
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 9
          </div>
        </div>    
      </div>
    </div>  
  </div>
</div>

JSFiddle

Of course I searched for the problem and there are a lot solutions to the problem already. However I did not find one that solves my problem

The most cited solution is to make the tooltip position: absolute and add a wrapper outside of the div with overflow:hidden as can be seen here. This does not work in my case because the tooltip should be to the right of the item it describes. So I need the relative position on the tooltip container.

I tried wrapping the tooltip with position:relative and some offset in a wrapper with position:absolute. This did not work, as the wrapper catches the mouse hover for the tooltip. Also this means I have to know the size of the attached item.

I tried laying out the items in the tooltip-container horizontally and then use the standard position:absolute trick, but I could not make that work either.

Does anybody have an idea?

Constraints:

  • the tooltip appears in a container which has overflow:hidden and should escape it
  • the content in the container can be moved around
  • there are no fixed sizes
  • if possible it should be a CSS only solution (but most definitely no jQuery)
  • the tooltip should appear to the right of the attached item (bonus points if it can appear to any side of the item)
  • the tooltip may not only contain text but also other controls and inputs
like image 233
jsf Avatar asked Jun 22 '18 08:06

jsf


People also ask

How do I show overflow text in tooltip?

Using CSS, we can set the max width of the table cells, hide overflow and show ellipsis at the end of the overflowing text. When the user hovers over the long text, we can display the full content in a tooltip.

How do I make my tooltip always visible?

Enabling sticky tooltip To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .

What is hover tooltip?

A tooltip is a user interface component containing text that appears when a user hovers their cursor over an element. A tooltip usually contains text that provides additional description, context, or instructions that users may want to know.

How do I hide a tooltip?

To display ToolTips, select the Show ToolTips box. To hide ToolTips, clear the Show ToolTips box.


1 Answers

The only CSS trick you can use is the position:fixed that you block with a null transform and you can have most of your constraints:

body {
  min-height:200vh;
  transform:translate(0,0);
}

.container {
  border: 1px black solid;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.inner {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.column {
  background-color: #99FF99;
  padding: 25px;
}

.tooltip-container {
  position: relative;
}

.content {
  background-color: #9999FF;
  width: 50px;
  height: 50px;
}

.tooltip {
  z-index: 1;
  background-color: #FF9999;
  display: none;
  position: fixed;
  transform:translate(50px,-50px);
  /*left: 100%;
  top: 0%;*/
  white-space: nowrap;
}

.tooltip-container:hover .tooltip {
  display: inline-block;
}
<div class="container">
  <div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            1
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 1
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            2
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 2
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            4
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 4
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            3
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 3
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            5
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 5
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            6
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 6
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            7
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 7
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            8
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 8
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            9
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 9
          </div>
        </div>    
      </div>
    </div>  
  </div>
</div>
like image 160
Temani Afif Avatar answered Oct 04 '22 21:10

Temani Afif