https://virgool.io/feed/@m_67714050 کارشناس ارشد مهندسی نرم افزار، طراح و توسعه دهنده وب (Full Stack web Developer)، علاقمند به تولید محتوا، مولف fa 2026-06-07 14:30:26 https://files.virgool.io/upload/users/2530664/avatar/hrI6Dc.png?height=120&width=120 https://virgool.io/@m_67714050 https://virgool.io/@m_67714050/%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D9%85%D8%A7%DA%98%D9%88%D9%84-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-tooltip-%D8%AF%D8%B1-reactjs-rllwxxerxaaf ماژول های مختلفی برای استفاده از 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" یک سر و گردن از ما بقی بالاتر است. پیام حیاتی پیام حیاتی Thu, 18 May 2023 01:12:45 +0330