Follow the tutorials here to use the HTMLPLUS
library on React-based
projects.
Select your desired component from below and see the available properties, slots, events, styles and methods.
Below is a collection of simple to complex examples.
import React from "react";
import { Tooltip } from "@htmlplus/react";
const App = () => {
return <>
<div className="center">
<button>
Button
<Tooltip> Tooltip</Tooltip>
</button>
</div>
</>;
};
export default App;
.center {
text-align: center;
}
import React from "react";
import { Grid, Tooltip } from "@htmlplus/react";
const App = () => {
return <>
<Grid gutter="md">
<Grid.Item xs="12" sm="4">
<button>
Top
<Tooltip placement="top">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Top Start
<Tooltip placement="top-start">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Top End
<Tooltip placement="top-end">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Right
<Tooltip placement="right">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Right Start
<Tooltip placement="right-start">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Right End
<Tooltip placement="right-end">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Bottom
<Tooltip placement="bottom">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Bottom Start
<Tooltip placement="bottom-start">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Bottom End
<Tooltip placement="bottom-end">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Left
<Tooltip placement="left">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Left Start
<Tooltip placement="left-start">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item xs="12" sm="4">
<button>
Left End
<Tooltip placement="left-end">
Tooltip
</Tooltip>
</button>
</Grid.Item>
</Grid>
</>;
};
export default App;
button {
display: block;
width: 100%;
padding: 0.5rem;
}
import React from "react";
import { Grid, Tooltip } from "@htmlplus/react";
const App = () => {
return <>
<Grid justifyContent="evenly">
<Grid.Item>
<button>
Hover
<Tooltip trigger="hover">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item>
<button>
Focus
<Tooltip trigger="focus">
Tooltip
</Tooltip>
</button>
</Grid.Item>
<Grid.Item>
<button>
Click
<Tooltip trigger="click">
Tooltip
</Tooltip>
</button>
</Grid.Item>
</Grid>
</>;
};
export default App;