A
Anonymous

Recovery Progress Tooltip - Copy this React, Tailwind Component to your project

import-{-useState,-useRef,-useLayoutEffect-}-from-"react";-import-styles-from-"../Recovery.module.scss";-import-BreakUpTable-from-"./BreakUpTable";-const-RecoveryviewProgress-=-({-item-}:-any)-=>-{-const-[hover,-setHover]-=-useState(false);-const-collectedGraphWrapperRef-=-useRef(null);-const-[tooltipPosition,-setTooltipPosition]-=-useState({-x:-0,-y:-0-});-const-{-collectedGraphWrapper,-upperAmount,-graph,-filledGraph,-lowerAmount,-tablebreakdown,-}-=-styles;-const-{-collected,-total,-lastTrxAmt,-lastTrxTimeDiff-}-=-item;-const-totalNumber-=-parseFloat(total.replace(/[^\d.-]/g,-""));-const-collectedNumber-=-parseFloat(collected.replace(/[^\d.-]/g,-""));-const-filledGraphValue-=-(collectedNumber-/-totalNumber)-*-100;-useLayoutEffect(()-=>-{-//@ts-ignore-const-rect-=-collectedGraphWrapperRef.current.getBoundingClientRect();-setTooltipPosition({-x:-rect.left,-y:-rect.bottom-});-},-[]);-const-handleMouseEnter-=-()-=>-{-//@ts-ignore-const-rect-=-collectedGraphWrapperRef.current.getBoundingClientRect();-setTooltipPosition({-x:-rect.left,-y:-rect.bottom-+-10-});-setHover(true);-};-const-handleMouseLeave-=-()-=>-{-setHover(false);-};-return-(-<td-style={{-width:-"170px",-}}-onMouseEnter={handleMouseEnter}-onMouseLeave={handleMouseLeave}->-<div>-<div-className={collectedGraphWrapper}-ref={collectedGraphWrapperRef}>-<div-className={upperAmount}>-<span>{collected}-</span>/-{total}-</div>-<div-className={graph}-data-tip=""-data-for={`breakdown`}-data-event="click"-data-event-off="dblclick"->-<div-className={filledGraph}-style={{-width:-`${filledGraphValue}%`-}}-></div>-</div>-{lastTrxTimeDiff-?-(-<p-className={lowerAmount}>-{lastTrxAmt},-{lastTrxTimeDiff}-</p>-)-:-null}-</div>-<div-className={tablebreakdown}-style={{-visibility:-hover-?-"visible"-:-"hidden",-top:-tooltipPosition.y,-left:-tooltipPosition.x,-transition:-"all-0.5s-ease-in",-display:-hover-?-"block"-:-"none",-}}->-<BreakUpTable-item={item}-/>-</div>-</div>-</td>-);-};-export-default-RecoveryviewProgress;-I-want-if-the-tooltip-goes-out-of-box-from-the-table-then-it-will-switch-the-position-it-will-come-to-top

Prompt
Component Preview

About

RecoveryProgressTooltip - Displays dynamic recovery progress with interactive tooltips, professionally built with React and Tailwind. View and copy code!

Share

Last updated 1 month ago