راهنمای ابزار
پایه راهنمای ابزار

تول‌تیپ‌ها یک راه کار مفید برای ارائه اطلاعات یا توضیحات اضافی برای عناصر در یک صفحه وب هستند. معمولاً زمانی که کاربران روی یک عنصر موسی را حرکت می‌دهند یا با آن تعامل می‌کنند، ظاهر می‌شوند و با ارائه زمینه و توضیح، شفافیت را فراهم می‌کنند. این بخش نحوه پیاده‌سازی تول‌تیپ‌های پایه را در برنامه‌های وب شما توضیح می‌دهد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-placement="top" title="این مثال تولتیپ فوق‌العاده است!" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary tooltip cursor-pointer tooltip cursor-pointer"
HTMLCloseTagنمایش راهنمای ابزارHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

بخش "تول‌تیپ پایه" نشان داده است که چگونه از تول‌تیپ‌ها برای ارائه اطلاعات اضافی و راهنمایی به کاربران در هنگام تعامل با عناصر در صفحه وبتان استفاده کنید. با پیروی از این راهنماها و بهترین روش‌ها، تجربه کاربری را بهبود بخشیده و زمینه ارزشمندی را بدون ایجاد اضافه‌وزن بر رابط کاربری فراهم کنید.

تول‌تیپ هنگام کلیک

یک "تول‌تیپ هنگام کلیک" نوعی تغییری از تول‌تیپ سنتی است که زمانی که کاربر بر روی یک المان کلیک می‌کند، ظاهر می‌شود به جای اینکه روی آن هاور شود. این بخش توضیح می‌دهد که چگونه تول‌تیپ‌ها را که زمانی که رویدادهای کلیک اتفاق می‌افتد، پدیدار می‌شوند، در برنامه وب خود پیاده‌سازی کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-placement="top" title="این مثال تولتیپ فوق‌العاده است!" data-trigger="click" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary tooltip cursor-pointer tooltip cursor-pointer"
HTMLCloseTagنمایش راهنمای ابزارHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

بخش "تول‌تیپ هنگام کلیک" نشان داده است که چگونه از تول‌تیپ‌ها استفاده کنید که زمانی که کاربران بر روی المان‌ها در برنامه وب شما کلیک می‌کنند، ظاهر شوند. با دنبال کردن این راهنما و بهترین روش‌ها، می‌توانید اطلاعات اضافی و زمینه را به کاربرانتان ارائه دهید هنگامی که به آن نیاز دارند، و تجربه کلی کاربران را بهبود ببخشید.

نکته‌نامه‌ی روشن

یک "راهنمای روشن" نوعی از راهنمایی است که اطلاعات اضافی را زمانی که کاربر روی یک عنصر نگه می‌دارد، ارائه می‌دهد. این راهنماها با ظاهری ساده و حداقلی طراحی شده‌اند. این بخش توضیح می‌دهد که چگونه راهنمای روشن را در برنامه وب خود پیاده‌سازی کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-placement="top" title="این مثال تولتیپ فوق‌العاده است!" data-theme="light" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary tooltip cursor-pointer tooltip cursor-pointer"
HTMLCloseTagنمایش راهنمای ابزارHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

بخش "راهنمای روشن" نشان داده است که چگونه از راهنماهایی که اطلاعات اضافی را زمانی که کاربر بر روی عناصر در برنامه وب شما نگه دارد، استفاده کنید. با پیروی از این راهنماها و روش‌های بهتر، می‌توانید درک کاربر را بهبود بخشیده و تجربه کلی کاربر را بهبود بخشید.

محتوای دلخواه راهنما

محتوای دلخواه راهنما به شما اجازه می‌دهد تا راهنماها را با اطلاعات شخصی‌سازی و پویا ایجاد کنید. به جای استفاده از متن استاتیک، می‌توانید راهنماها را با محتوای پویا مانند تصاویر، آیکون‌ها، یا حتی کامپوننت‌های React پر کنید. این بخش توضیح می‌دهد که چگونه محتوای دلخواه راهنما را در برنامه وب خود پیاده‌سازی کنید.

کد / پیش‌نمایش نمونه
تیل وایز - قالب داشبورد مدیریتی
برد پیت
HTML قالب مدیریت با TailwindCSS 3+
            
                HTMLOpenTag!-- BEGIN: Custom راهنمای ابزار Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tooltip="custom-tooltip-content" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش راهنمای ابزارHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: Custom راهنمای ابزار Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: محتوای دلخواه راهنما --HTMLCloseTag
                                                HTMLOpenTagdiv class="tooltip-content"HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="custom-tooltip-content"
    class="tippy-content"
HTMLCloseTag
    HTMLOpenTagdiv class="relative flex items-center py-1"HTMLCloseTag
                                                            HTMLOpenTagdiv class="image-fit h-12 w-12"HTMLCloseTag
                                                                HTMLOpenTagimg
                                                                    class="rounded-full"
                                                                    src="dist/images/products/product7-400x400.jpg"
                                                                    alt="تیل وایز - قالب داشبورد مدیریتی"
                                                                HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="rtl:mr-4 ltr:ml-4 rtl:ml-auto ltr:mr-auto"HTMLCloseTag
                                                                HTMLOpenTagdiv
                                                                    class="whitespace-nowrap font-medium leading-normal dark:text-slate-200"HTMLCloseTag
                                                                    برد پیت
                                                                HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTagdiv
                                                                    class="mt-0.5 whitespace-nowrap text-xs text-slate-500 dark:text-slate-400"HTMLCloseTag
                                                                    HTML قالب مدیریت با TailwindCSS 3+
                                                                HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: محتوای دلخواه راهنما --HTMLCloseTag
            
        

بخش "محتوای تولتیپ سفارشی" نشان داده است که چگونه تولتیپ‌ها با محتوای شخصی‌سازی شده و پویا ایجاد شوند که به شما امکان می‌دهد به کاربران راهنمایی با غنا و ویژگی‌های ویژه‌ای ارائه دهید. با بهره‌مندی از این ویژگی، می‌توانید تجربه کاربری کلی و قابلیت استفاده از برنامه وب خود را بهبود بخشید.

نمودار راهنمای ابزار

تولتیپ‌های نمودار نقش اساسی در بصری‌سازی داده‌ها دارند، به کاربران اطلاعات ارزشمندی را در هنگام تعامل با نمودارها و نمودارها ارائه می‌دهند. این بخش توضیح می‌دهد که چگونه تولتیپ‌های نمودار را در برنامه وب خود یکپارچه کرده و به طور خاص به نیازهای آن تنظیم کنید.

کد / پیش‌نمایش نمونه
ارزش خالص
نقطه قوت منحصر به فرد: +23%
            
                HTMLOpenTag!-- BEGIN: Custom راهنمای ابزار Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tooltip="chart-tooltip" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش راهنمای ابزارHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: Custom راهنمای ابزار Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: محتوای دلخواه راهنما --HTMLCloseTag
                                                HTMLOpenTagdiv class="tooltip-content"HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="chart-tooltip"
    class="tippy-content py-1 py-1"
HTMLCloseTag
    HTMLOpenTagdiv class="font-medium dark:text-slate-200"HTMLCloseTag
                                                            ارزش خالص
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 flex items-center sm:mt-0"HTMLCloseTag
                                                            HTMLOpenTagdiv class="rtl:ml-2 ltr:mr-2 flex w-20 dark:text-slate-400"HTMLCloseTag
                                                                نقطه قوت منحصر به فرد:
                                                                HTMLOpenTagspan class="rtl:mr-auto ltr:ml-auto font-medium text-success"HTMLCloseTag
                                                                    +23%
                                                                HTMLOpenTag/spanHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="w-24 sm:w-32 lg:w-56"HTMLCloseTag
                                                                HTMLOpenTagdiv class="w-auto h-[30px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart simple-line-chart-1 simple-line-chart-1"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: محتوای دلخواه راهنما --HTMLCloseTag
            
        

بخش "تولتیپ نمودار" نشان داده است که چگونه تولتیپ‌ها برای نمودارها و بصری‌سازی داده‌ها ساخته و سفارشی شوند. با پیاده‌سازی تولتیپ‌های نمودار طراحی شده به خوبی، می‌توانید به کاربران اطلاعات ارزشمندی را ارائه دهید، فهم آنها از داده‌ها را بهبود بخشیده و مشارکت کاربر را بهبود بخشید.

رابط اجزاء

در این بخش، شما اطلاعات دقیقی درباره ویژگی‌ها، کلاس‌ها، و گزینه‌های موجود که می‌توان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگی‌ها برای سفارشی‌سازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

Tippy
پراپ نوع شرح
`getRef` `(el: PopperElement | null) => void` یک تابع برای گرفتن مرجع به PopperElement یا null
`content` `string` محتوایی که در راهنما نمایش داده می‌شود
`as` `string` نوع عنصر HTML یا مولفه React برای نمایش
`options` `Props` گزینه‌های اضافی برای سفارشی‌سازی راهنما ظاهر و رفتار
TippyContent
پراپ نوع شرح
`to` `string` انتخاب کننده عنصر هدف برای راهنما (استفاده از ویژگی data-tooltip)
`getRef` `(el: HTMLElement | null) => HTMLElement` تابعی برای دریافت مرجع به عنصر راهنما یا null
`options` `Props` گزینه‌های اضافی برای سفارشی‌سازی راهنما ظاهر و رفتار