[Tooltip] Is there any way to apply a border to a tooltip arrow?

[sandy0096]

I am trying to make a tooltip with an arrow having a thin border all over. All I can get is with arrow class tweak is the following. or this. Border properties do not work either. Because arrows are made up of border itself.

[oliviertassinari]

The best I could do is

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

// You don't have to use makeStyles.
// The important part is to generate two class names and apply the same styles.
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    tooltip: {
      background: "#fff",
      color: "#000",
      border: "1px solid #000",
      borderRadius: 0
    },
    arrow: {
      fontSize: 16,
      width: 17,
      "&::before": {
        border: "1px solid #000",
        backgroundColor: "#fff",
        boxSizing: "border-box"
      }
    }
  })
);

export default function SimpleTooltips() {
  const classes = useStyles();

  return (
    <Tooltip
      title="Delete"
      arrow
      classes={{
        tooltip: classes.tooltip,
        arrow: classes.arrow
      }}
      open
    >
      <button>Hello</button>
    </Tooltip>
  );
}

https://codesandbox.io/s/material-demo-4gj4k?file=/demo.tsx

[oliviertassinari]

@sakulstra What do you think of moving the border-box style into the source to not change the size of the arrow when a border is applied?

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index f3dd0451f..d21812392 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -102,6 +102,7 @@ export const styles = (theme) => ({
     position: 'absolute',
     width: '1em',
     height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */,
+    boxSizing: 'border-box',
     color: fade(theme.palette.grey[700], 0.9),
     '&::before': {
       content: '""',

[sakulstra]

What do you think of moving the border-box style into the source to not change the size of the arrow when a border is applied?

i'm fine with that :+1: