Using the scroll feature within the tooltip component in React with @material-ui/core/Tooltip can cause the entire page to

I am currently working with a tooltip created using the @material-ui/core/Tooltip library, and it is functioning correctly. You can see an example of the tooltip in action at this link: https://codesandbox.io/s/kgccc.

https://i.stack.imgur.com/fMgGb.png

Due to the abundance of content within the tooltip, I have implemented a scroll feature:

.tooltip-popup-details{
    height: 300px;
    overflow: auto;
}

However, I have encountered an issue where attempting to scroll within the tooltip causes the entire page to scroll instead. I have tried various troubleshooting methods without success. It seems that dragging or scrolling inside the tooltip itself is not functioning as intended. Any assistance would be greatly appreciated.

cssreactjsscrollmaterial-uitooltip

Answer №1

After customizing the Material UI example, I created a variation with a fixed-height tooltip featuring a scrollbar similar to yours. You can view my version here. In this iteration, scrolling within the tooltip is possible using both the touchpad and the tooltip's scrollbar.

To prevent the tooltip from disappearing when moving the mouse away from the triggering button, I included the interactive={true} attribute on the tooltip.

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

Tips for aligning content produced by *ngFor within a bootstrap grid

I am trying to center content in a row using the Bootstrap grid system. While I have checked out various examples, such as this one, my case is unique because I am utilizing a separate angular component for generating the content. Here is the code snippet ...

cssangularbootstrap-grid

Logo-enhanced Navigation Bar in Bootstrap

Hey everyone, I've been experimenting with Bootstrap headers that include a logo before the "Brand" text. I'm facing an issue where the navbar doesn't resize properly, as shown in the screenshot below: - The navbar doesn't adjust to t ...

htmlcsstwitter-bootstrap

What's the reason why Angular stops flickering with the use of "/" in href?

Recently, I've come across a peculiar issue in one of my web applications while using Angular's routeProvider as a template engine. The app functions properly, but the behavior seems inexplicable to me. The problem arises during page transitions ...

javascripthtmlangularjscss

What is the best way to retrieve the selected value from a React select component?

Here is my code, can someone please assist me? I seem to be encountering an issue. const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: &apo ...

reactjsreact-selectreact-hook-form

Issue with resetting the state of a react-select component remains unresolved

I'm currently facing two issues with my react-select component: Firstly, once I select an option, I am unable to change it afterwards. Second, when my form is reset, the react-select component does not reset along with the other fields. For simplici ...

javascriptreactjs

What is the best way to eliminate the input range in a React date range picker?

Here is an image illustrating a date range picker: https://i.stack.imgur.com/pwKaI.png I am looking to remove the labels for days before today and starting from today in the date range picker. How can I achieve this? Below is my code snippet: class Better ...

javascriptreactjsreact-daterange-picker

The node.js system automatically restarts an API call when a timeout occurs

Current Setup: I am using a combination of sails.js for the backend API and React for the frontend. The communication between the frontend and backend is handled by the fetch API. Scenario: Within some of my API endpoints, I need to run an external file ...

javascriptnode.jsreactjssails.jsfetch

Setting the state based on Promise values within a loop

I am currently facing a challenge in my React project where I am using axios to interact with an external API. The goal is to loop through the array of objects retrieved from the API call and utilize the values returned by a separate function within the ...

javascriptreactjspromiseaxioses6-promise

Using TypeScript to consolidate numerous interfaces into a single interface

I am seeking to streamline multiple interfaces into one cohesive interface called Member: interface Person { name?: { firstName?: string; lastName?: string; }; age: number; birthdate?: Date; } interface User { username: string; emai ...

javascriptreactjstypescript

What could be causing the failure of this web component using shadow DOM when the HTML code includes multiple instances of the component?

Recently, a question was raised on this platform regarding the use of Selenium to access the shadow DOM. Curious about this topic, I delved into the MDN article Using shadow DOM and decided to replicate the code on my local machine. Surprisingly, it worked ...

javascripthtmlcssweb-componentshadow-dom

Avoiding the overlap of sub-menu items vertically

My nested unordered list acting as a sub-menu has an issue with overlapping list items. It seems like the padding of the links is causing the overlap: ul { padding: 12px 0; list-style: outside none none; } li { display: inline-block; margin-righ ...

htmlcssdrop-down-menupadding

Utilize HTML strings to serve static files in express.js

While I primarily focus on frontend development, I often face challenges when working on the server side. Currently, I have a server.js file that includes: const express = require('express'); const http = require('http'); const path = ...

javascriptnode.jsreactjsexpress

Exploring Typescript within React: Creating a property on the current instance

Within my non-TypeScript React component, I previously implemented: componentWillMount() { this.delayedSearch = _.debounce((val) => { this.onQuerySearch(val); }, 1000); } This was for debouncing user input on an input field. The corres ...

javascriptreactjstypescript

Creating a List Item with Equal Height as Its Parent Container

<nav> <ul id="navUl"> <li> <div class="settingsDiv"> hey </div> </li> </ul> </nav> I am trying to adjust the height of the div element to match the height of the nav. My g ...

htmlcss

Tips for displaying a tooltip when hovering over a label in a Material UI slider

I'm currently working on a slider quiz and my goal is to have the tooltip appear when hovering over the label on the slider. Currently, I can only see the tooltip when I hover directly on the thumb at the location of my mouse. Refer to the image belo ...

javascriptreactjsmaterial-uislider

Fixing Issues with React Material UI TextField Styling Issues

I am facing an issue with styling the TextField API provided by Material UI (available here). Despite trying to apply custom styling, the component is not reflecting the changes when rendered on a webpage, appearing in its default form. Any assistance in ...

reactjsmaterial-uiuitextfieldstyling

CSS, Assistance in incorporating a sub menu into a drop-down menu

I'm looking to enhance my drop down menu by adding a sub menu. Specifically, I would like to create a sub menu for Item 3 in the HTML below. How can I achieve this? Thank you, Below is my CSS code: .nav_menu { width:100%; background-color:# ...

htmlcssdrop-down-menusubmenu

iOS 8 home screen web apps with status bar overlay and footer bar integration

After installing a web application to 'home' and working with it, I noticed that a recent update to iOS has made the usual black status bar transparent and float above the web content below. In addition, there is an unseen horizontal bar at the ...

cssangularjssafariios8statusbar

The information retrieved from the API call did not meet my expectations; instead, it returned as undefined

In my development project, I have organized my functions in a file called PostApi.js. In another file, Posts.js, I make the call to these functions. However, when using api.getPosts() and data in the Posts.js file, I encounter an issue where it returns un ...

javascriptreactjsaxiosfetch-api

Encountering a 404 error while deploying a Next.js application using AWS Amplify

I am currently attempting to deploy a Next.js (v12) application to Amplify. Despite all the checkmarks showing as green, I encounter a 404 error when I try to visit the URL provided by AWS. Here are my build settings: version: 1 frontend: phases: pr ...

reactjsamazon-web-servicesnext.jsaws-amplify