diff --git a/submissions/react/react-tooltip-shimmer-pulse-crypto/README.md b/submissions/react/react-tooltip-shimmer-pulse-crypto/README.md new file mode 100644 index 0000000000..d140f28f0d --- /dev/null +++ b/submissions/react/react-tooltip-shimmer-pulse-crypto/README.md @@ -0,0 +1,104 @@ +# React Shimmer Pulse Tooltip – Crypto + +A reusable React tooltip component featuring a shimmer pulse animation designed for crypto dashboards, trading interfaces and financial applications. Built with EaseMotion CSS utility classes, responsive layouts and accessible tooltip semantics. + +--- + +## Features + +- React functional component +- Shimmer Pulse animation +- Crypto-inspired UI +- Responsive layout +- Accessible tooltip semantics +- EaseMotion CSS utility classes +- Customizable props +- Optional external stylesheet +- Lightweight and reusable + +--- + +## Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `label` | string | `"BTC"` | Trigger button label | +| `text` | string | `"Bitcoin is trading above resistance."` | Tooltip content | +| `position` | string | `"top"` | Tooltip position (`top`, `bottom`, `left`, `right`) | + +--- + +## Usage + +```jsx +import ShimmerPulseTooltip from "./ShimmerPulseTooltip"; + +function App() { + return ( + + ); +} +``` + +--- + +## Styling + +Import the stylesheet: + +```jsx +import "./style.css"; +``` + +The component uses EaseMotion CSS utility classes including: + +- `ease-fade-in` +- `ease-hover-lift` + +along with a custom shimmer pulse animation. + +--- + +## Accessibility + +- Uses `role="tooltip"` +- Links trigger and tooltip with `aria-describedby` +- Keyboard accessible using `:focus-within` +- Hover and keyboard interaction supported + +--- + +## Responsive + +The tooltip automatically adapts spacing and sizing for smaller screens while preserving readability. + +--- + +## Folder Structure + +``` +react-tooltip-shimmer-pulse-crypto/ +│ +├── ShimmerPulseTooltip.jsx +├── style.css +└── README.md +``` + +--- + +## Browser Support + +- Chrome +- Firefox +- Edge +- Safari + +--- + +## License + +Designed for the EaseMotion CSS React examples collection. diff --git a/submissions/react/react-tooltip-shimmer-pulse-crypto/ShimmerPulseTooltip.jsx b/submissions/react/react-tooltip-shimmer-pulse-crypto/ShimmerPulseTooltip.jsx new file mode 100644 index 0000000000..d9dd8d4c43 --- /dev/null +++ b/submissions/react/react-tooltip-shimmer-pulse-crypto/ShimmerPulseTooltip.jsx @@ -0,0 +1,34 @@ +import "./style.css"; + +export default function ShimmerPulseTooltip({ + text = "Bitcoin is trading above resistance.", + label = "BTC", + position = "top" +}) { + return ( +
+ + + +
+ ); +} diff --git a/submissions/react/react-tooltip-shimmer-pulse-crypto/style.css b/submissions/react/react-tooltip-shimmer-pulse-crypto/style.css new file mode 100644 index 0000000000..29a84ef8f8 --- /dev/null +++ b/submissions/react/react-tooltip-shimmer-pulse-crypto/style.css @@ -0,0 +1,135 @@ +.tooltip-wrapper{ + position:relative; + display:inline-flex; + justify-content:center; + align-items:center; + margin:4rem; +} + +.tooltip-trigger{ + padding:.9rem 1.5rem; + border:none; + border-radius:12px; + background:#111827; + color:#fff; + cursor:pointer; + font-size:1rem; + font-weight:600; + transition:transform .3s ease; +} + +.tooltip-trigger:hover{ + transform:translateY(-2px); +} + +.tooltip{ + position:absolute; + min-width:240px; + padding:1rem; + border-radius:14px; + overflow:hidden; + background:#18181b; + color:#fff; + box-shadow:0 18px 40px rgba(0,0,0,.35); + opacity:0; + visibility:hidden; + transform:translateY(8px) scale(.95); + transition:all .35s ease; +} + +.tooltip-wrapper:hover .tooltip, +.tooltip-wrapper:focus-within .tooltip{ + opacity:1; + visibility:visible; + transform:translateY(0) scale(1); +} + +.tooltip-top{ + top:auto; + bottom:calc(100% + 14px); + left:50%; + transform:translateX(-50%) translateY(8px) scale(.95); +} + +.tooltip-bottom{ + top:calc(100% + 14px); + left:50%; + transform:translateX(-50%) translateY(-8px) scale(.95); +} + +.tooltip-left{ + right:calc(100% + 14px); + top:50%; + transform:translateY(-50%) scale(.95); +} + +.tooltip-right{ + left:calc(100% + 14px); + top:50%; + transform:translateY(-50%) scale(.95); +} + +.tooltip-content{ + position:relative; + z-index:2; +} + +.tooltip-content strong{ + display:block; + margin-bottom:.35rem; + font-size:1rem; +} + +.tooltip-content p{ + font-size:.9rem; + line-height:1.6; + color:#d4d4d8; +} + +.tooltip-shimmer{ + position:absolute; + inset:0; + background:linear-gradient( + 120deg, + transparent 20%, + rgba(255,255,255,.18) 50%, + transparent 80% + ); + transform:translateX(-100%); + animation:shimmerPulse 2s linear infinite; +} + +.tooltip-arrow{ + position:absolute; + left:50%; + bottom:-8px; + width:16px; + height:16px; + background:#18181b; + transform:translateX(-50%) rotate(45deg); +} + +@keyframes shimmerPulse{ + from{ + transform:translateX(-100%); + } + + to{ + transform:translateX(100%); + } +} + +@media(max-width:600px){ + .tooltip{ + min-width:200px; + font-size:.9rem; + } + + .tooltip-trigger{ + width:100%; + } + + .tooltip-wrapper{ + margin:2rem 1rem; + } +}