Question 352926 in Html Question posted in
Some basic documentation can be found here.

Html – How can I use tooltip in scrollable element?

I have an element that can be scrollable in the direction x which includes a tooltip:

.nav-item {
  width: 120px;
}

.scroll-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #dee2e6;
  color: black;
}

.scroll-container .nav-tabs {
  width: max-content;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
}

.scroll-container .nav-item {
  list-style: none;
}

.scroll-container .nav-tabs .nav-item {
  margin-right: 10px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .button {
  margin: 0;
}

.tooltip .tooltip__content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 120px;
  z-index: 2;
  display: block;
  margin-top: 10px;
  padding: 4px 8px;
  background: #445e5f;
  border-radius: 4px;
  font-size: 12px;
  color: pink;
  text-align: center;
  text-transform: none;
  white-space: normal;
  font-weight: normal;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-out;
}

.tooltip .tooltip__content:after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom: 5px solid #445e5f;
}

.tooltip .tooltip__content--wide {
  min-width: 240px;
}

.tooltip:hover .tooltip__content {
  visibility: visible;
  opacity: 1;
}
<div class="scroll-container">
  <ul class="nav nav-tabs mt-4">
    <div class="nav-item">
      <div class="nav-link d-flex vertical-center"> <span class="tooltip"> <a>Action 1</a> <span class="tooltip__content"><a>content</a></span></span>
      </div>
    </div>
    <div class="nav-item">
      <div class="nav-link d-flex vertical-center"> <span class="tooltip"> <a>Action 1</a> <span class="tooltip__content"><a>content</a></span></span>
      </div>
    </div>
    <div class="nav-item">
      <div class="nav-link d-flex vertical-center"> <span class="tooltip"> <a>Action 1</a> <span class="tooltip__content"><a>content</a></span></span>
      </div>
    </div>
  </ul>
</div>

the small triangle under Action 1 is a tooltip. If I remove overflow-x:auto and overflow-y:hidden tooltip works how I expected but this time scrollable feature is gone. How can I use scrollable (overflow-x: auto; and overflow-y: hidden;) and tooltip together?

Tags:

2

Answers


  1. 0

    there is no way to do this becuse you cut the content
    but i need to wnow why you need this

    Login or Signup to reply.
  2. 0

    There’s no easy way around it. Best approach I can think of would be setting .tooltip__content to position: fixed but at the same time you have to remove top and left params to keep this element positioned in any way relative to its parent. width: 100% won’t work either, so you’ll have to set exact position and dimensions via JavaScript. Check this answer, it looks promising.

    The other way is to separate tooltips into second container below and also position them via JavaScript accordingly.

    You may also want to check this answer as it offers a pretty unique solution to a similar problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search