The process of adding a tooltip icon to a Select component in Material-UI

I'm currently working with the material UI tooltip component and I want to position my tooltip to the right of a dropdown, right next to the down arrow as shown in the image below:

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

However, the way it is set up now, the tooltip appears below the select in an awkward manner.

  <FormControl label='Identifier Type' style={{ width: '100%' }}>
    <Select
      ...
    />
      <Tooltip disableHoverListener onClose={handleTooltipClose} open={open} placement='right' title='Helper....'>
        <Button variant="secondary" onClick={handleTooltipOpen}>
          <Icon
            size="small"
            accessibleText='Delete Row'
            name='help'
            style={{ color: '4c505b' }}
          />
        </Button>
      </Tooltip>
    </div>
  </FormField>
htmlcssreactjsmaterial-ui

Answer №1

As per the API documentation for the Select component, currently in version 5.14.11 it does not support appending a helper icon directly. However, through CSS styling, you can customize the appearance to make it seem integrated. One approach is using MUI's makeStyles. In this example, inline-styling was utilized by adding the Box element from MUI and omitting the Button:

<FormControl variant="standard" label="Identifier Type" >
    <Box style={{display: "flex", justifyContent: "flex-end", alignItems: "flex-end"}}>
        <InputLabel id="color">Color</InputLabel>
        <Select
            value=""
            label="Color"
            labelId="color"
            style={{ width: '200px' }}
        >
            <MenuItem value="1">Green</MenuItem>
            <MenuItem value="2">Orange</MenuItem>
            <MenuItem value="3">Red</MenuItem>
        </Select>
        <Tooltip disableHoverListener title="helper.." placement="right" >
            <HelpCenterIcon 
                fontSize="small"
                name="help"
                style={{ color: "#757575", padding: "5px 10px", borderBottom: "1px solid #949494", }}
            />
        </Tooltip>
    </Box>
</FormControl>

This is how the customized layout appears:

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

If you are interested, I can provide you with the solution using makeStyles.

Answer №2

After encountering some style issues on mobile with @Amrovic's solution, I managed to achieve a similar outcome using the renderValue prop of the Select component:

<FormControl>
  <InputLabel id={id}>{label}</InputLabel>
  <Select
    labelId={id}
    id={id}
    name={id}
    value={values[id]}
    label={label}
    onChange={onChange}
    onBlur={onBlur}
    renderValue={(value: string) => (
      <Box display="flex" justifyContent="space-between">
        {value}
        {tooltipText && <Tooltip content={tooltipText} />}
      </Box>
    )}
  >
    {options.map((option) => (
      <MenuItem key={option} value={option}>
        {option}
      </MenuItem>
    ))}
  </Select>
</FormControl>

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

Integrating Next.js with a authentication provider and a Redux provider

During the development of my Next js project, I incorporated Next auth using import {Provider} from 'next-auth/client' to wrap the <Component /> in _app.js. However, I also want to integrate Redux into the project. This involves importing ...

javascriptreactjsreduxnext.jsnext-auth

Failed to dynamically load MUI icon in Next.js

Attempting to utilize dynamic loading of icons: "use client" import dynamic from 'next/dynamic'; const DynamicIcon = ({ iconName }) => { const IconComponent = dynamic(() => import(`@mui/icons-material/${iconName}`).then((mo ...

next.jsmaterial-ui

Enhance your reality with Intel XDK's augmented reality feature

I am looking to develop an app using HTML and Intel XDK. It's a simple process - just place the final html pages in the www folder of the project and your app is good to go. Now, I want to integrate this: https://github.com/krisrak/html5-augmented-rea ...

htmlintel-xdk

Printing the HTML Template of a widget with multiple loops results in a blank first page being displayed

I have encountered an issue while working with a table and ng-repeat loops in my report widget. The table displays fine on the screen, but when I try to print it, there is always a blank page at the beginning. Interestingly, if I remove the second and thir ...

javascripthtmlangularangularjsservicenow

"Error 404: Invalid request encountered while using React and

I am encountering an issue with a 404 not found error when I attempt to send a post request in React. My code involves using Django Rest Framework on the backend and React Axios on the frontend, but I am facing errors while making the post request. Below i ...

javascriptreactjsdjango-rest-frameworkaxios

Developing a React application build

As a newcomer to React, I have successfully deployed a small working prototype of a React application on AWS ECS as a docker container. This app was created using "create-react-app" with the following Dockerfile: FROM node:alpine as build WORKDIR /app COPY ...

reactjsamazon-web-servicesdockernpm

How can I display the output from Geocoder in a text box using the ArcGIS JavaScript API?

I am trying to customize the Geocoder text box in the ArcGIS JavaScript API by overriding the default search result. Although I have written some code for this purpose, I am not satisfied with the results. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

javascriptjqueryhtmldojoarcgis-js-api

Warning: Unhandled promise rejection - An error has occurred that prevents headers from being sent to the client

When attempting to retrieve a login response, I encountered the following error: (node:5904) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at ServerResponse.setHeader (_http_outgoing. ...

node.jsreactjsmongodbapimongoose

The JSON code encountered an unexpected token

My current setup involves using webpack with React to load external data from a static json file. Inside my entry.jsx file, I have the following code: const data = require('../data/data.json'); However, this code results in an error message: ...

jsonreactjswebpack

Retrieve data from a MySQL table based on a specific condition in PHP

Can someone assist me with fetching data from a table where the valid_from date is less than a specified date (excluding the current date)? I have a table that looks like this: view my table here For instance, if my date is 02-04-2015, I would want to re ...

phphtmlmysqlcss

What is the recommended Vue js lifecycle method for initializing the materialize dropdown menu?

https://i.stack.imgur.com/cjGvh.png Upon examining the materialize documentation, it is evident that implementing this on a basic HTML file is straightforward: simply paste the HTML code into the body and add the JavaScript initializer within a script tag ...

javascripthtmlcssvue.jsmaterialize

Align elements on the left side with some space between them

Having trouble displaying a list of images inline within a div. When I float them left, they leave a lot of space and do not display properly. Can anyone help me with this issue? See screenshot below: Here is my html code: <div class="col75"> & ...

javascriptjqueryhtmlcss

Adjusting Font Size for Buttons on Mobile Devices in HTML

I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...

htmlcss

Display duplicated options with Bootstrap selectpicker and organize them into optgroups

I have encountered an issue while trying to create a selectpicker using Bootstrap 5 with optgroups. The problem is that all option elements under each optgroup are identical and do not match the HTML structure I have defined in my file. This inconsistency ...

htmltwitter-bootstrapselectbootstrap-5

Unable to relocate CSS Loader Container

Can someone help me with adjusting the placement of my container? I'm struggling to maintain the styles while getting rid of the position: absolute; on the .dot class. Every attempt I make is resulting in the dots moving erratically! To clarify, I w ...

htmlcsscss-animations

How can I control the direction of motion in SVG animations using Framer?

Using framer motion for SVG animation, struggling to control animation path directions. Some paths go left to right while others go right to left. How can I manage the direction? Attempted useMotionValue and animating individually without success in contro ...

reactjsanimationsvgnext.jsframer-motion

Personalizing the look of Stripe Payment Component in a React Application

Currently, I have integrated the Stripe Payment Element into my React application using the code snippet below: import { useStripe, useElements, PaymentElement, } from '@stripe/react-stripe-js' export const PaymentDetails = () => { const st ...

javascriptreactjsstripe-payments

The table borders in IE 11 do not display properly when using Html5 and CSS

In a previous version, the table had visible borders. However, when I added the property text-align:center; to my container, the table did not align to the center. I then tried adding display:inline-block; to the table, which successfully centered it. It l ...

htmlcss

Implementing edit fields within a table row upon clicking in a ReactJS project can be achieved without relying on the react

Is there a way in JSX to transform a specific row in a table into an editable input row when clicked, without relying on external libraries like react-table? <table className="table-data"> <tbody> <tr> <th>Name</th> ...

reactjshtml-tableeditjsx

The React Router test commences outside of the home page

While testing my App component, I encountered an issue during the second test. In the first test, the process begins from the home page where I click on a drink-preview to access a recipe. However, in the subsequent test, which is expected to follow the sa ...

reactjsunit-testingreact-routerjestjsreact-testing-library