بهترین ماژول ایجاد Tooltip در ReactJS

ماژول های مختلفی برای استفاده از Tooltip ها در کتابخانه ری اکت وجود داره اما در این مقاله کوتاه می خوام یکی از بهترین های این قابلیت رو معرفی کنم.
ماژول "react-laag"، برای نصبش کافیه وارد ترمینال بشید و دستور زیر رو وارد کنید:

npm i react-laag

حالا در پوشه src پروژه یک پوشه ببا نام "compoonents" برای نگهداری و مدیریت کامپوننت های جدید ایجاد می کنیم، در این پوشه فایلی با نام "Tooltips.jsx" ایجاد کنید و کدهای زیر رو داخلش قرار بدید:

import { useLayer, useHover, Arrow } from &quotreact-laag"

const Tooltip = ({ children, content }) => {

const [isOver, hoverProps] = useHover();

const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({

isOpen: isOver,

});

return (

<>

<span {...triggerProps} {...hoverProps}>

{children}

</span>

{isOver &&

renderLayer(

<div className=&quottooltip&quot {...layerProps}>

{content}

<Arrow {...arrowProps} />

</div>

)}

</>

);

};

export default Tooltip;

این فایل یا کامپوننت همانند یک کلاس یا تابع عمل میکنه و هر زمان نیاز به استفاده از Tooltip ها داشتیم کافیه اون رو فراخونی کنیم، به عنوان مثال وارد فایل "App.js" میشم و به شکل زیر کامپوننت "Tooltips.jsx" رو فراخوانی و استفاده می کنم:

import &quot./App.css"

import Tooltip from &quot./components/Tooltips"

function App() {

return (

<div className=&quotApp&quot>

<div>

When you hover <Tooltip content=&quotI'm a tooltip!&quot>this</Tooltip> word,

you should see a tooltip

</div>

</div>

);

}

export default App;

نتیجه رو ببینیم:

جمع بندی:
اگرچه ماژول های مختلفی برای کار با Tooltip وجود دارد اما از نظر "Reusable" بودن ماژول "react-laag" یک سر و گردن از ما بقی بالاتر است.