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

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

کد / پیش‌نمایش نمونه
            
                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
            
        

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

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

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

کد / پیش‌نمایش نمونه
            
                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
            
        

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

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

این بخش توضیح می‌دهد که چگونه می‌توانید محتوای دلخواه راهنما را در وب‌سایت خود ایجاد کنید.

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