The tooltip of the Material UI IconButton is displaying incorrectly

Within my ReactJS application, I am utilizing Material UI along with react-bootstrap-table components.

One particular cell in my application utilizes the Material UI IconButton as shown below:

 <IconButton tooltip={t('tooltips:editRegulation')} tooltipPosition={'left'}
     onClick={() => this.props.history.push("/pms-records/edit/" + row.pmsFindingId)}>{cell}}>
     <FontIcon className="fa fa-pencil" aria-hidden="true"/>
 </IconButton>

The output looks like this:

https://i.sstatic.net/WpJ8e.png

The tooltip text gets cropped by the borders of the table cell. I have attempted adjusting the z-index and referred to this post: https://github.com/mui-org/material-ui/issues/5912

However, I have failed to find a solution so far.

Any suggestions to help me resolve this issue?

Thank you in advance

cssreactjsmaterial-ui

Answer №1

Your mobile device is likely enforcing a css rule that specifies overflow: hidden. One possible solution is to display the tooltip using a portal, but be aware that this could affect the position of your element. It may be more effective to override the table-cell CSS instead

On the related GitHub issue:

The issue was resolved by adding style={ { overflow: 'visible' } } to the TableRowColumn containing the IconButton.

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

Having trouble aligning input elements in the middle of a div container

Can anyone help me with centering elements inside a div? Check out this example: I created a wrapper for the number inputs and tried applying the text-center property on them, but it's not working. I also changed the display to block, but that doesn& ...

htmlcss

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

htmlcssflexboxhidden

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

javascriptjqueryhtmlcss

Material UI: After upgrading to version 5, the priority of useStyles (makeStyles) has been reduced

After upgrading to Material Ui version 5, I noticed that all my styles were being given lower priority in the stylesheet. const useStyles = makeStyles((theme) => ({ drawer: { [theme.breakpoints.down('md')]: { width: 0, ...

reactjsmaterial-ui

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

javascriptcssdjango-templatescarousel

Empower the parent container to wrap around its child elements using Flexbox

I am trying to make the flexbox parent item adjust its width based on the children, but currently it is stretching out to full width and leaving empty space on the right side. Here is the CSS code I have tried: .flexParent { display:flex; background:# ...

htmlcssflexbox

Firebase Firestore restricting access to authenticated users

I'm facing a challenge I am currently working on a project and I am having trouble retrieving data from the database for an authenticated user. It seems like I might be overlooking something. Within firebase.js, my code looks like this const app = in ...

reactjsfirebasegoogle-cloud-firestorenext.jsfirebase-authentication

Hover activates a CSS animation where elements pop over other elements

I want to design a menu that resembles those "apps panels" we often see. My menu consists of 6 elements, arranged side-by-side with no space between them. When I hover over an element, it slightly pops as shown in the code snippet below: #account-bub ...

htmlcss

The phrase 'nodemon' is not identified as a valid cmdlet, function, script file, or executable program

Recently I started working with Node.js, but I encountered an error when trying to run a program. The error message says "the term nodemon is not recognized the name of cmdlet, function, script file or operable function". Can someone please assist me with ...

javascripthtmlcssnode.jssocket.io

What is the best source for retrieving data - my database, an open api, or JSON files?

For my novice portfolio, I am creating a Pokemon team builder app. With over 800 unique Pokemon to choose from, each with its own abilities and moves, the project requires substantial data. Luckily, there is a free online api known as PokeAPI that provides ...

reactjsjsonnext.js

It is impossible to perform both actions at the same time

Is it possible to create a progress bar using data attributes in JQuery? Unfortunately, performing both actions simultaneously seems to be an issue. <div class="progressbar"> <div class="progressvalue" data-percent="50"></div> </d ...

javascriptjqueryhtmlcss

The image on Bootstrap isn't showing up

Can someone please help me troubleshoot why my logo image is not showing up? I can't figure out why the min and max width/height parameters are not working as intended. Here is my HTML: <div class="container-fluid"> <div class="head"> ...

htmlcsstwitter-bootstrap

What is the process for installing the shadcn component library with yarn or npm?

My latest project involves creating a Notion-inspired app using Next.js and the shadcn/ui library from [https://ui.shadcn.com/]. I attempted to add shadcn/ui to my project using npm and yarn, but encountered some difficulties along the way. ...

reactjsnext.jspackageshadcnui

Exploring the art of beautifying React.js with SCSS

I have been working on creating the homepage layout for a project using SCSS to style Reactjs with the assistance of an online course. However, I am facing an issue where my layout looks different from the one presented in the course even though I have app ...

cssreactjs

What code can I use to prompt clients to refresh JavaScript files automatically?

We are experiencing an issue where, even after pushing out updates with new JavaScript files, client browsers continue to use the cached version of the file and do not display the latest changes. While we can advise users to perform a ctrlF5 refresh during ...

javascriptreactjs

Using the useState Hook: What is the best way to add a new item to the end of an array stored in the state

I'm currently working on a project using Next.js and Tailwind, where I am trying to populate an array using the useState Hook. My intention is to iterate through the array using the map function and add items to the end of the array until there are n ...

javascriptreactjsreact-hooksnext.jsuse-state

Discover the secrets to achieving complete customization of your data table's appearance using the DevExtreme React Grid in conjunction with material-ui

I am facing difficulties in styling the DevExtreme React Grid, which I found from their documentation here. Here is the sample code that I copied from another repository. I have a few questions: How can I have complete control over the styling? I noti ...

cssreactjsmaterial-uidevextreme

What is the correct location for the webpack.config.js file within a React project?

I recently inherited a React project that I need to continue working on, but I have never used React before. I've been advised to use a web worker in the project and have found a tool that seems suitable for my needs: Worker Loader The suggested meth ...

javascriptnode.jsreactjswebpackbabeljs

Issue with React Hook Form and Material UI component inputRef- Uncontrolled input type changing on component

While trying to utilize React hook form and a material UI component, I encountered the following error: Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled ...

reactjsmaterial-uireact-hook-form

Display a modal across all pages by incorporating a button component, regardless of its placement

I've implemented a header in my react app with a show dialog button that appears on all necessary pages. Currently, my approach to displaying the dialog is as follows: When the user clicks the button, I dispatch an action to the redux store { type:S ...

javascriptreactjsmaterial-ui