Skip to content

feat(docs): update image formats from GIF to AVIF in documentation #7229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alicanerdurmaz merged 1 commit into from
Jan 22, 2026
Merged

feat(docs): update image formats from GIF to AVIF in documentation #7229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions documentation/blog/2021-11-12-issue-tracker-refine.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ Now let's go to the Supabase Table editor and create our constant values.

Let's create a test task to better understand key relation.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/task_test.gif" alt="overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/task_test.avif" alt="overview" />
<br />

As you can see, since we have defined the ids of our label, status, priority and users tables as references to our tasks table, we can now use their values.
Expand Down Expand Up @@ -490,7 +490,7 @@ export default App;

Here we define our login and signup pages. We then use the Refine's [router-provider](https://refine.dev/core/docs/packages/documentation/routers/) and [useNavigaton](https://refine.dev/core/docs/core/hooks/navigation/useNavigation/) hooks to switch between login and signup.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/login.gif" alt="overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/login.avif" alt="overview" />
<br />

We can now create supabase users and log in from our Refine interface.
Expand Down Expand Up @@ -992,7 +992,7 @@ export const TaskCreate = () => {
};
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/create_test.gif" alt="overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/create_test.avif" alt="overview" />
<br />

## Edit Task
Expand Down Expand Up @@ -1333,17 +1333,17 @@ Our project is done. Lets see how its look like.

`Overview`

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/overview-project.gif" alt="overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/overview-project.avif" alt="overview" />
<br />

`Task Filter`

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/filter.gif" alt="overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/filter.avif" alt="overview" />
<br />

`Dashboard Page`

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/dashboard.gif" alt="overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/dashboard.avif" alt="overview" />
<br />

As you can see, we made a simple and short task manager application using Refine on our front end and using its data-provider.
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2021-11-26-refine-vs-react-admin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ Although **Refine** is a newer framework, it is successful in identifying defici
npm create refine-app@latest demo-refine-project -- -b v3
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-26-refine-vs-react-admin/project_setup.gif" alt="setup" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-26-refine-vs-react-admin/project_setup.avif" alt="setup" />

### Features

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2021-11-29-refine-vs-admin-bro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Although **Refine** is a newer framework, it is successful in identifying defici
npm create refine-app@latest demo-refine-project -- -b v3
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-29-refine-vs-adminbro/project_setup.gif" alt="setup" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-29-refine-vs-adminbro/project_setup.avif" alt="setup" />

### Features

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2021-12-27-multipart-upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ As you can see, we have created our multer structure and a simple server to run

The requests we created to send files by JavaScript will now be sent to our local server.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-27-multipart-upload/overview.gif" alt="upload overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-27-multipart-upload/overview.avif" alt="upload overview" />
<br />

## How to Multipart Upload with Refine?
Expand Down
6 changes: 3 additions & 3 deletions documentation/blog/2022-01-18-csv-import.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function App() {

Here, once the user-selected file has been successfully uploaded, we can process and display the file. Now let's load a sample CSV file and see it output on our console.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/console.gif" alt="console_csv_output" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/console.avif" alt="console_csv_output" />
<br />

As you can see, we can now read a selected CSV file. We can convert this file, which we read as a plain text type, into an Array of Object with JavaScript and place it inside a Table element.
Expand Down Expand Up @@ -191,7 +191,7 @@ function App() {
....
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/overview.gif" alt="overview_csv" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/overview.avif" alt="overview_csv" />
<br />

We formatted the CSV file that came in plain text format, using Javascript [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) and [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) methods, and created two separate array. Then we converted Header and Rows arrays to Array of Object format as Key, Value.
Expand All @@ -215,7 +215,7 @@ The CSV import with **Refine** is very simple and out-of-the-box feature. How to

## Refine CSV Import Usage

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/importing.gif" alt="importing_csv" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/importing.avif" alt="importing_csv" />
<br />

Importing CSV files is simple and fast using the [`useImport`](https://refine.dev/core/docs/core/hooks/import-export/useImport/) hook and [`ImportButton`](https://refine.dev/core/docs/ui-frameworks/antd/components/buttons/import-button/) provided by **Refine**.
Expand Down
8 changes: 4 additions & 4 deletions documentation/blog/2022-02-21-react-antd-admin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ cd refine-advanced-tutorial
npm run dev
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/refine_tutorial.gif" alt="Refine Tutorial" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/refine_tutorial.avif" alt="Refine Tutorial" />
<br />

As you have seen, our example project is ready. Now let's examine how the features offered by **Refine** are included in a project and how they are used.
Expand Down Expand Up @@ -337,7 +337,7 @@ return (

Now our i18n Provider is ready to use, let's test it together.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/i8n-overview.gif" alt="Refine i18n Provider" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/i8n-overview.avif" alt="Refine i18n Provider" />
<br />

### Use the translation with Table Content
Expand Down Expand Up @@ -418,7 +418,7 @@ export const PostList: React.FC = () => {
};
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/table-i18n.gif" alt="Refine i18n Provider" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/table-i18n.avif" alt="Refine i18n Provider" />
<br />

You can add the translation you want and organize your content according to different languages ​​together with the **Refine** i18n Provider.
Expand Down Expand Up @@ -808,7 +808,7 @@ export const PostList = () => {

Here, if the selected role is Admin, the 'Hit' section will appear in our Table. We have stated that the Editor role cannot display this section.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/access-control.gif" alt="Refine Access Control Provider" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/access-control.avif" alt="Refine Access Control Provider" />
<br />

Check out [**Refine** Access Control](https://refine.dev/core/docs/guides-and-concepts/access-control/) Provider for more detailed information and step-by-step guide
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-02-22-refine-invoice-generator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -856,7 +856,7 @@ export const ClientList = () => {

We created our `Client` and `Contact` pages. Now, let's create a Client with **Refine** and define contacts for our clients.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-22-refine-invoice-genarator/clients_overview.gif" alt="Refine Clients Overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-22-refine-invoice-genarator/clients_overview.avif" alt="Refine Clients Overview" />
<br />

## Example
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-03-01-refine-invoice-generator-p2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -914,7 +914,7 @@ const styles = StyleSheet.create({
</p>
</details>

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-01-refine-invoice-generator-p2/invoice_pdf.gif" alt="Refine Invoice PDF Export" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-01-refine-invoice-generator-p2/invoice_pdf.avif" alt="Refine Invoice PDF Export" />
<br />

## Example
Expand Down
10 changes: 5 additions & 5 deletions documentation/blog/2022-03-22-refine-with-react95.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -909,7 +909,7 @@ export default App;

</details>

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/layout-with-dummy-pages.gif" alt="Refine95 Menu" className="border border-gray-200 rounded"/>
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/layout-with-dummy-pages.avif" alt="Refine95 Menu" className="border border-gray-200 rounded"/>

## Create Post CRUD Pages

Expand Down Expand Up @@ -1178,7 +1178,7 @@ We used the `useTable` hook to fetch the data for the table. It makes a request

After fetching the data, we used the React95 table components to render the data. We also added delete button and edit button to each row. When the user clicks the delete button, we call the `deletePost` function with the `resource` and `id` parameters. The `deletePost` function is provided by the [`useDelete`](/core/docs/data/hooks/use-delete/) hook. When the user clicks the edit button, we call the `edit` function with the "posts" resource and the post id to navigate to the edit page.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/list-page.gif" alt="Refine List Page" className="border border-gray-200 rounded" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/list-page.avif" alt="Refine List Page" className="border border-gray-200 rounded" />

### Create Page and Edit Page

Expand Down Expand Up @@ -1282,7 +1282,7 @@ export const PostCreate: React.FC = () => {

</details>

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/create-page.gif" alt="Refine Create Page" className="border border-gray-200 rounded"/>
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/create-page.avif" alt="Refine Create Page" className="border border-gray-200 rounded"/>

Now, let's update a `<PostEdit />` component in `src/pages/posts/edit.tsx` directory with the following code:

Expand Down Expand Up @@ -1377,11 +1377,11 @@ export const PostEdit: React.FC = () => {

Edit and create pages almost look the same. We can use the same form for both pages. [`useForm`](/core/docs/packages/list-of-packages/) hook knows which action we are performing. For example, if we are on the edit page, it will automatically fetch the post data and fill the form with it.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/edit-page.gif" alt="Refine Edit Page" className="border border-gray-200 rounded"/>
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/edit-page.avif" alt="Refine Edit Page" className="border border-gray-200 rounded"/>

## Project Overview

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/overview.gif" alt="Refine Project Overview" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-22-refine-with-react95/overview.avif" alt="Refine Project Overview" />

## Live CodeSandbox Example

Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-03-29-react-hook-form-upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export default App;

Our project is ready! With React Hook Form, we can now send the selected file to our server in `multipart/form-data` type. Let's test it!

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-29-react-hook-form-upload/image_upload.gif" alt="multipart/form-data file upload" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-03-29-react-hook-form-upload/image_upload.avif" alt="multipart/form-data file upload" />
<br />

<br/>
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -832,7 +832,7 @@ export const PostList: React.FC = () => {

Now we are able to delete record by clicking delete button and confirmation.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-07-21-admin-panel-with-materialui-and-strapi/delete-record.gif" alt="Create record action" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-07-21-admin-panel-with-materialui-and-strapi/delete-record.avif" alt="Create record action" />

<br/>
<br/>
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-08-23-mui-usedatagrid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,7 +545,7 @@ export default EmployeeList;
Here's a GIF showing the result of the above example.

<div className="flex justify-center">
<img className="border border-gray-200 rounded" src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-08-23-mui-usedatagrid/controlled-sort.gif" alt="employees Gif" />
<img className="border border-gray-200 rounded" src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-08-23-mui-usedatagrid/controlled-sort.avif" alt="employees Gif" />
</div>

You can refer to MU X DataGrid [documentation](https://mui.com/x/react-data-grid/sorting/) for more information on the sorting feature.
Expand Down
8 changes: 4 additions & 4 deletions documentation/blog/2022-09-01-framer-text-animations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ Finally, we use the Framer Motion `transition` prop because every effective anim

The easing shows the scale at which the text animation enters before going to its original scale.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/scale1.gif" alt="Scale for text" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/scale1.avif" alt="Scale for text" />

<br/>

Expand Down Expand Up @@ -234,7 +234,7 @@ The inner carousel will perform the spinning and sliding effects. The framer mot

This will give it a unique spinning effect, as you can see below:

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/photos-1.gif" alt="Scale for photo" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/photos-1.avif" alt="Scale for photo" />

<br/>

Expand Down Expand Up @@ -269,7 +269,7 @@ function App() {
}
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/photos-2.gif" alt="Scale for photo" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/photos-2.avif" alt="Scale for photo" />

<br/>

Expand Down Expand Up @@ -305,7 +305,7 @@ function App() {
}
```

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/photos-3.gif" alt="Scale for photo" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-01-framer-text-animations/photos-3.avif" alt="Scale for photo" />

<br/>

Expand Down
4 changes: 2 additions & 2 deletions documentation/blog/2022-09-27-react-hook-form-validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1068,7 +1068,7 @@ export default Create;

Now, if you save your progress and go to the browser, the company and role fields should only display when the Employed option is selected.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-27-react-hook-form-validation/react-hook-form-big2.gif" alt="react Hook Form error handling" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-27-react-hook-form-validation/react-hook-form-big2.avif" alt="react Hook Form error handling" />

<br />

Expand Down Expand Up @@ -1109,7 +1109,7 @@ Lastly, add an `onSubmit` event handler to the form and pass the `handleSubmit`

Now, if you save your progress and head over to the browser, you should get a logged object of the form’s data in your console when you fill in the fields and submit the form.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-27-react-hook-form-validation/react-hook-form-console.gif" alt="React Hook Form error handling" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-27-react-hook-form-validation/react-hook-form-console.avif" alt="React Hook Form error handling" />

<br />

Expand Down
4 changes: 2 additions & 2 deletions documentation/blog/2022-10-31-next-getInitial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ We'll go through some examples to see how both functions work in real-world appl

The GIF below shows how `getInitialProps` behaves when it's used to fetch data for server-side rendering.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-31-next-getInitial/getInitProp.gif" alt="getinitialprops" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-31-next-getInitial/getInitProp.avif" alt="getinitialprops" />

<br />

Expand Down Expand Up @@ -239,7 +239,7 @@ However, when we make client-side navigation to the home page `localhost:3000` u

The GIF below shows the same example from the previous section using `getServerSideProps` to fetch a list of users from the [JSONPlaceholder](https://jsonplaceholder.typicode.com/) API for server-side rendering.

<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-31-next-getInitial/getServerProp.gif" alt="getserversideprops" />
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-31-next-getInitial/getServerProp.avif" alt="getserversideprops" />

<br />

Expand Down
8 changes: 4 additions & 4 deletions documentation/blog/2022-11-29-mui-tooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export default function PositionedTooltips() {
</details>

<div className="centered-image" >
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-2.gif" alt="Material UI tooltip " />
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-2.avif" alt="Material UI tooltip " />
</div>

**Note**: Tooltip positioning is critical when using them in a web application. A poorly placed Tooltip may detract from the overall UX of the app.
Expand Down Expand Up @@ -243,7 +243,7 @@ export default function VariableWidth() {
```

<div className="centered-image" >
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-4.gif" alt="Material UI tooltip " />
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-4.avif" alt="Material UI tooltip " />
</div>

### Material UI Tooltip Transitions
Expand Down Expand Up @@ -287,7 +287,7 @@ In the code above, three tooltips have been set to display with varying transiti
Here’s the result:

<div className="centered-image" >
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-5.gif" alt="Material UI tooltip " />
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-5.avif" alt="Material UI tooltip " />
</div>

### Virtual element placement
Expand Down Expand Up @@ -496,7 +496,7 @@ The code above illustrates a simple login form UI with instructions provided to
Here’s the result:

<div className="centered-image" >
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-8.gif" alt="Material UI tooltip" />
<img style={{alignSelf:"center"}} src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-29-mui-tooltip/tooltip-8.avif" alt="Material UI tooltip" />
</div>

## Conclusion
Expand Down
Loading