Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

custom styling for material UI tooltip arrow?

I would like to add a custom style for Material UI tooltip arrow but I can not set the border color and the background color.

This is the configuration I have - react:

const useStylesBootstrap = makeStyles(theme => ({
arrow: {
    // color: '#E6E8ED',
    border: '1px solid #E6E8ED',
},
tooltip: {
    backgroundColor: theme.palette.common.white,
    border: '1px solid #E6E8ED',
    color: '#4A4A4A'
},

}));

This is what I want to achieve:

enter image description here

I want to apply a gray color in the triangle border and the background will be white.

On the arrow configuration, the border config will not work, it will apply a border color in the square that's housing the triangle. Without material UI, the issue could be solved using the pseudo :before and :after to achieve the desired output. I would like to know if there is a solution to this using material UI custom configuration. Not too familiar with Material UI, your help will be appreciated

like image 840
medev21 Avatar asked Jun 30 '20 21:06

medev21


People also ask

How do you style Mui tooltip arrows?

The MUI Tooltip can include an “arrow” pointer simply by including prop arrow={true} . Styling is possible by targeting the MuiTooltip-arrow class and the :before pseudo-element. Add the below inside the PopperProps sx prop to create the same styling as my tutorial. My example still uses position="left-start" .

How do you style a material UI tooltip?

To style React Material UI tooltip, we can use the makeStyles function. We call makeStyles with a function that returns an object that has some classes with some styles. We set the background color and the color in the classes.

How do I change the tooltip arrow position?

The tooltip position can be changed by using the radio button click event. The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.

How do I add an arrow on tooltip?

To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class ::after together with the content property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble.


1 Answers

You are right, You need to override &:before pseudoselector like this. Here is the code sandbox project link

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  arrow: {
    "&:before": {
      border: "1px solid #E6E8ED"
    },
    color: theme.palette.common.white
  },
  tooltip: {
    backgroundColor: theme.palette.common.white,
    border: "1px solid #E6E8ED",
    color: "#4A4A4A"
  }
}));

export default function ArrowTooltips() {
  let classes = useStyles();

  return (
    <Tooltip
      title="Add"
      arrow
      classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}
    >
      <Button>Arrow</Button>
    </Tooltip>
  );
}

enter image description here

like image 165
Harsh kurra Avatar answered Sep 30 '22 14:09

Harsh kurra