The Material UI ToolTip displays inaccurately when placed within a container that has overflow scroll enabled

Within my ReactJS application, I have implemented a list of Material UI ToolTips with IconButtons nested inside a div element featuring overflow: scroll.

One specific row displays the Material UI ToolTip in the following manner:

<ClickAwayListener onClickAway={handleTooltipClose}>
  <Tooltip
    PopperProps={{
      disablePortal: true,
    }}
    onClose={handleTooltipClose}
    open={open}
    disableFocusListener
    disableHoverListener
    disableTouchListener
    title={data}
    arrow
  >
    <InfoOutlinedIcon
      className={classes.root}
      onClick={handleTooltipOpen}
    />
  </Tooltip>
</ClickAwayListener>

There are issues with the positioning and display of the tooltip, as illustrated here:

https://i.sstatic.net/t18DO.jpg https://i.sstatic.net/PIoiL.jpg

Unfortunately, applying overflow: visible; to the div container housing the table and ToolTips is not an option due to the desired scroll behavior. Is there a workaround to prevent the ToolTip from being clipped by the container?

javascripthtmlcssreactjsmaterial-ui

Answer №1

When working with Material-UI, it utilizes the Popper.js library. To handle various scenarios, you can leverage different Popper.js Options using the Tooltip PopperProps. In your specific case, consider implementing the preventOverflow modifier:

<Tooltip
  PopperProps={{
    disablePortal: true,
    popperOptions: {
      positionFixed: true,
      modifiers: {
        preventOverflow: {
          enabled: true,
          boundariesElement: "window" // specify the boundary as "window"
        }
      }
    }
  }}
  title={popperTitle}
  aria-label="add"
>

For a live demo, you can check out this CodeSandbox link.

Answer №2

For me, I was able to resolve a similar issue by turning off the flip modifier in Popper:

<Tooltip
        title={title}
        placement="top"
        arrow
        open={open}
        PopperProps={{
            disablePortal: true,
            popperOptions: {
                modifiers: [
                    {
                        name: 'flip',
                        enabled: false
                    }
                ]
            }
        }}
    >
        {children}
    </Tooltip>

Answer №3

Although the solution provided by 95faf8e76605e973 was helpful, it didn't completely solve my issue. I found that I needed to add the modifier 'preventOverflow' to make it work as expected. Here is the modified code snippet:

<Tooltip
PopperProps={{
  disablePortal: true,
  popperOptions: {
    positionFixed: true,
    modifiers: {
      name: 'preventOverflow',
      options: {
        enabled: true,
        boundariesElement: "window" // specifying the boundary as "window"
      }
    }
  }
}}
title={popperTitle}
aria-label="add"
>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performing a $lookup operation across various collections for a nested output

I have multiple collections and I've utilized the separate collection & foreign key approach. Now, I'm looking to combine these collections to create nested collections. Take a look at my collection schemas: const SurveySchema = new Schema({ _id ...

javascriptnode.jsmongodbmongooseaggregation-framework

Refresh the custom JavaScript dropdown list without having to reload the page

I implemented this code to customize a drop-down list Selector. Is there a way to reset this code without reloading the page, maybe by triggering a function with a button click? <button onclick="reset();">Reset</button> For example, if "Jagu ...

javascriptjqueryhtml

Maximizing the efficiency of critical rendering path while utilizing bootstrap

Is it feasible to enhance the critical rendering path (like Google and Facebook) while utilizing Bootstrap 3? Facebook opted for inlining styles connected to the header and sidebars. Meanwhile, Google inlined all styles since they have minimal styles for ...

csstwitter-bootstrap-3

Django DRF functions properly, however it returns an error when sending a response to an AJAX request

Successfully implemented an AJAX request using PUT in DRF. All functionalities are functioning correctly except for the error callback being triggered: DRF section: class ProductDataViewSet(viewsets.ViewSet): authentication_classes = [SessionAuthentic ...

javascriptjquerydjangoajaxdjango-rest-framework

The Value Entered in Angular is Unsaved

I have encountered an issue with my app's table functionality. The user can enter information into an input field and save it, but upon refreshing the page, the field appears empty as if no data was entered. Can someone please review my code snippet b ...

javascripthtmlangulartypescript

Utilizing the input type file within an anchor tag to create a dropdown item

I am facing an issue while trying to incorporate the input type file within a dropdown item inside an anchor tag. Here is the code snippet causing the problem: <div className="dropdown-menu actions-text"> <a className="dropdown-item" href= ...

javascripthtmlcssbootstrap-4

React, API Simulation

In this project, I am required to avoid using any React library. Ideally, I would like to access the data through a local JSON file (such as db.json) if the API is not available, but retrieve the data from the API when it is accessible. How can I achieve t ...

reactjsjsonapimocking

Maintain the grouping of elements within a div when printing in Internet Explorer 8

When printing in IE8, I'm facing an issue with keeping the "Table title" line on the same page as the <table>. Despite using page-break-inside:avoid;, there is still a page break between the table title and the actual table. My expectation is f ...

cssxhtmlprintingprinting-web-pagepage-break-inside

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

Why does the ng-style condition not work with min=0 if the saved value of ng-model="detail.Amount" is negative? <input type="number" min="0" oninput="validity.valid||(value='');" class="form-control" title="Amount" ng-model="detail.Amount" ng ...

htmlangularjsvalidation

Leveraging PHP variables to determine the image location, implement an onclick function to cycle through the image gallery

I am facing an issue with a database query that is supposed to display multiple images. These images are stored in a PHP variable and shown one at a time using a JavaScript gallery with an onclick function to navigate through them. Unfortunately, the funct ...

javascriptphpimage

How can I retrieve the background and border color of the focused HTML element after pressing the tab on a website?

I am seeking to automate the process of conducting website accessibility checks by analyzing the color contrast between the focused element (after pressing tab) and its border color. Strategy: Initially, I attempted to take screenshots of the entire web ...

htmlcssgoogle-chromemachine-learningcomputer-vision

AngularJS - development of a service entity

After deliberating between posting in the Angular mailing list or seeking assistance from the JavaScript community, I have decided that this is more of a JavaScript question. Hopefully, the knowledgeable individuals on Stack Overflow can provide a quicker ...

javascriptangularjs

Retrieving Information from Website Database

My goal is to import data from a web query into Excel. However, I am facing a challenge with the IP address (e.g., 10.10.111.20) because it only displays page 1 with 20 rows of entry data. When I try to navigate to page 2 or beyond, the data does not updat ...

javascriptexcelvba

Revamp the HTML table with JavaScript headers

I imported data from a CSV file into an HTML table and here is how it appears: <div id="myTable" style="-ms-overflow-x: auto;"> <table> <tbody> <tr class="rownum-0"> <td>Make</td> ...

javascriptjqueryhtmlcsv

HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it. I found the code for the off-canvas menu on W3Scho ...

javascripthtmlcssoff-canvas-menu

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

javascripthtmlangulartypescript

Vue-bootstrap spinbutton form with customizable parameters

I am in need of a custom formatter function for the b-form-spinbutton component that depends on my data. I want to pass an extra argument to the :formatter-fn property in the code snippet below, but it is not working as expected. <b-form-spinbutton :for ...

javascriptvue.jsvuejs2bootstrap-vue

Using Firebase onDisconnect with React Native

I am currently working on a React Native app and I am facing an issue where I need to update the user status to 'offline' in Firebase when the user closes the app. Here is what I have tried: import React, { Component } from 'react' ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Mastering ReactJs: The Ultimate Guide to Updating State Properties

I've been attempting to change the isSelected property for a specific row in my state data, but am finding that it's not updating. Can someone please offer guidance on the most effective approach to achieve this? var selecte ...

javascriptreactjs

Could someone please explain why my ajax is not functioning properly?

I have been working on an AJAX function to pass input values from one page to another. However, I am facing a challenge where the value is not being passed as expected after redirection. Despite my efforts, I cannot figure out why it's not functionin ...

javascriptjqueryhtmlajax