پیشفرض Tooltip
Huro یک راهنمای ابزار بسیار ساده و همه کاره و فقط CSS ارائه می دهد. مثال زیر نسخه پیش فرض و پایه است. 6 موقعیت پیش فرض وجود دارد hint--top-left, hint--top, hint--top-right, hint--bottom-left, hint--bottom, hint--bottom-left. The tooltip text is controlled via the data-hint attribute.
<span class="tag is-rounded is-solid hint--top-left" data-hint="Iam a top left tooltip">Top Left</span>
<span class="tag is-rounded is-solid hint--top" data-hint="Iam a top center tooltip">Top Center</span>
<span class="tag is-rounded is-solid hint--top-right" data-hint="Iam a top right tooltip">Top Right</span>
<span class="tag is-rounded is-solid hint--bottom-left" data-hint="Iam a bottom left tooltip">Bottom Left</span>
<span class="tag is-rounded is-solid hint--bottom" data-hint="Iam a bottom center tooltip">Bottom Center</span>
<span class="tag is-rounded is-solid hint--bottom-right" data-hint="Iam a bottom right tooltip">Bottom Right</span>
روشن Tooltip
Huro یک راهنمای ابزار بسیار ساده و همه کاره و فقط CSS ارائه می دهد. مثال زیر نسخه سبک است. برای کسب اطلاعات بیشتر در مورد گزینه های قرار دادن، به نکات ابزار پیش فرض مراجعه کنید. برای استفاده از راهنمای ابزار نور، کلاس hint--light را اضافه کنید.
<span class="tag is-rounded is-solid hint--light hint--top-left" data-hint="Iam a top left tooltip">Top Left</span>
<span class="tag is-rounded is-solid hint--light hint--top" data-hint="Iam a top center tooltip">Top Center</span>
<span class="tag is-rounded is-solid hint--light hint--top-right" data-hint="Iam a top right tooltip">Top Right</span>
<span class="tag is-rounded is-solid hint--light hint--bottom-left" data-hint="Iam a bottom left tooltip">Bottom Left</span>
<span class="tag is-rounded is-solid hint--light hint--bottom" data-hint="Iam a bottom center tooltip">Bottom Center</span>
<span class="tag is-rounded is-solid hint--light hint--bottom-right" data-hint="Iam a bottom right tooltip">Bottom Right</span>
Tooltip رنگی
راهنمای ابزار Huro می تواند رنگ های مختلفی داشته باشد که با یک کلاس CSS ساده قابل تغییر است. کلاس های رنگ موجود عبارتند از: hint--light, hint--primary, hint--info, hint--success, hint--warning and hint--error.
<span class="tag is-rounded is-solid hint--top" data-hint="Iam a default tooltip">Default</span>
<span class="tag is-rounded is-solid hint--light hint--top" data-hint="Iam a light tooltip">Light</span>
<span class="tag is-rounded is-solid hint--primary hint--top" data-hint="Iam a primary tooltip">Primary</span>
<span class="tag is-rounded is-solid hint--info hint--top" data-hint="Iam a info tooltip">Info</span>
<span class="tag is-rounded is-solid hint--success hint--top" data-hint="Iam a success tooltip">Success</span>
<span class="tag is-rounded is-solid hint--warning hint--top" data-hint="Iam a warning tooltip">Warning</span>
<span class="tag is-rounded is-solid hint--error hint--top" data-hint="Iam a danger tooltip">Error</span>
Tooltip شکل های
راهنمای ابزار Huro بر اساس آنچه در طراحی خود نیاز دارید، می تواند اشکال مختلفی داشته باشد. کلاس های شکل موجود عبارتند از: hint--rounded و hint--bubble. توجه داشته باشید که راهنمای ابزار حباب به طور پیش فرض دارای حروف بزرگ است و پیکان راهنمای ابزار ندارد.
<span class="tag is-rounded is-solid hint--primary hint--top" data-hint="Iam a default tooltip">Default</span>
<span class="tag is-rounded is-solid hint--primary hint--rounded hint--top" data-hint="Iam a rounded tooltip">Rounded</span>
<span class="tag is-rounded is-solid hint--primary hint--bubble hint--top" data-hint="I am a bubble tooltip">Bubble</span>