91 lines
3.3 KiB
JavaScript
91 lines
3.3 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Grid from '@mui/material/Grid';
|
||
|
|
import Button from '@mui/material/Button';
|
||
|
|
import Tooltip from '@mui/material/Tooltip';
|
||
|
|
import { prefixer } from 'stylis';
|
||
|
|
import rtlPlugin from '@mui/stylis-plugin-rtl';
|
||
|
|
import { StyleSheetManager } from 'styled-components';
|
||
|
|
import { CacheProvider } from '@emotion/react';
|
||
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||
|
|
import createCache from '@emotion/cache';
|
||
|
|
|
||
|
|
// Create rtl cache
|
||
|
|
const cacheRtl = createCache({
|
||
|
|
key: 'muirtl',
|
||
|
|
stylisPlugins: [prefixer, rtlPlugin],
|
||
|
|
});
|
||
|
|
|
||
|
|
const theme = createTheme({ direction: 'rtl' });
|
||
|
|
|
||
|
|
export default function PositionedTooltipsRtl() {
|
||
|
|
return (
|
||
|
|
<StyleSheetManager stylisPlugins={[rtlPlugin]}>
|
||
|
|
<CacheProvider value={cacheRtl}>
|
||
|
|
<ThemeProvider theme={theme}>
|
||
|
|
<Box sx={{ width: 500, margin: 10 }} dir="rtl">
|
||
|
|
<Grid container justifyContent="center">
|
||
|
|
<Grid>
|
||
|
|
<Tooltip title="Add" arrow open placement="top-start">
|
||
|
|
<Button>top-start</Button>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip title="Add" arrow open placement="top">
|
||
|
|
<Button>top</Button>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip title="Add" arrow open placement="top-end">
|
||
|
|
<Button>top-end</Button>
|
||
|
|
</Tooltip>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
<Grid container justifyContent="center">
|
||
|
|
<Grid size={6}>
|
||
|
|
<Tooltip title="Add" arrow open placement="left-start">
|
||
|
|
<Button>left-start</Button>
|
||
|
|
</Tooltip>
|
||
|
|
<br />
|
||
|
|
<Tooltip title="Add" arrow open placement="left">
|
||
|
|
<Button>left</Button>
|
||
|
|
</Tooltip>
|
||
|
|
<br />
|
||
|
|
<Tooltip title="Add" arrow open placement="left-end">
|
||
|
|
<Button>left-end</Button>
|
||
|
|
</Tooltip>
|
||
|
|
</Grid>
|
||
|
|
<Grid container alignItems="flex-end" direction="column" size={6}>
|
||
|
|
<Grid>
|
||
|
|
<Tooltip title="Add" arrow open placement="right-start">
|
||
|
|
<Button>right-start</Button>
|
||
|
|
</Tooltip>
|
||
|
|
</Grid>
|
||
|
|
<Grid>
|
||
|
|
<Tooltip title="Add" arrow open placement="right">
|
||
|
|
<Button>right</Button>
|
||
|
|
</Tooltip>
|
||
|
|
</Grid>
|
||
|
|
<Grid>
|
||
|
|
<Tooltip title="Add" arrow open placement="right-end">
|
||
|
|
<Button>right-end</Button>
|
||
|
|
</Tooltip>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
<Grid container justifyContent="center">
|
||
|
|
<Grid>
|
||
|
|
<Tooltip title="Add" arrow open placement="bottom-start">
|
||
|
|
<Button>bottom-start</Button>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip title="Add" arrow open placement="bottom">
|
||
|
|
<Button>bottom</Button>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip title="Add" arrow open placement="bottom-end">
|
||
|
|
<Button>bottom-end</Button>
|
||
|
|
</Tooltip>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Box>
|
||
|
|
</ThemeProvider>
|
||
|
|
</CacheProvider>
|
||
|
|
</StyleSheetManager>
|
||
|
|
);
|
||
|
|
}
|