tooltip for icon buttons in material ui list item is not working as expected

javascript css tooltip material-ui listitem
aver picture aver · Jun 22, 2018 · Viewed 7.9k times · Source

I'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.

What I am doing: I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:

<List>
   <ListItem button component="a" href={infoUrl}>
            <ListItemAvatar>
                <Avatar src={itemIcon} />
            </ListItemAvatar>
            <ListItemText 
                primary={this.props.project.name_with_namespace} 
                secondary={this.props.project.description}
            />
            <ListItemSecondaryAction>
                <Tooltip id="button-report" title="Report">
                    <IconButton area-label="Report" href={reportUrl}>
                        <AssessmentIcon />
                    </IconButton>
                </Tooltip>
                <Tooltip id="button-codeRepo" title="Code Repository">
                    <IconButton area-label="Code Repository" href={repoUrl}>
                        <CodeIcon />
                    </IconButton>
                </Tooltip>
            </ListItemSecondaryAction>
        </ListItem>
   </List>

Problem: The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".

The problem is the tooltip that was added to the IconButton under the ListItemSecondaryAction. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to Click and also see the tooltip.

If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.

Am I not using the Tooltip properly here? Tried both Chrome and FireFox and seeing the same issue.

Answer

jainam shah picture jainam shah · Mar 17, 2021

just add parent div and try to apply tooltip on that it worked for me

    <Tooltip title="delete" placement='start-top'>
           <div>
           <AiOutlineDelete style={{ fontSize: "30px", alignSelf: "center" }}/>
           </div>
    </Tooltip>

Related questions

Add a tooltip to a div

I have a div tag like this: <div> <label>Name</label> <input type="text"/> </div> How can I displaying a tooltip on :hover of the div, preferably with a fade …

Read More
HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; I'd like to …

Read More
Is there a way to have content from an IFRAME overflow onto the parent frame?

I have a UI widget that needs to be put in an IFRAME both for performance reasons and so we can syndicate it out to affiliate sites easily. The UI for the widget includes tool-tips that display over the top …

Read More