skill_web/components/
tooltip.rs

1//! Tooltip component for inline help text
2//!
3//! Provides a simple hover tooltip with an info icon that displays
4//! explanatory text for technical terms and configuration options.
5
6use yew::prelude::*;
7
8#[derive(Properties, PartialEq)]
9pub struct TooltipProps {
10    /// The tooltip text to display on hover
11    pub text: String,
12}
13
14/// Tooltip component with info icon
15///
16/// Displays an info icon that shows explanatory text on hover.
17/// The tooltip is positioned above and to the right of the icon.
18///
19/// # Example
20///
21/// ```ignore
22/// <Tooltip text="This explains what the setting does" />
23/// ```
24#[function_component(Tooltip)]
25pub fn tooltip(props: &TooltipProps) -> Html {
26    html! {
27        <span class="inline-flex items-center ml-1 group relative">
28            // Info icon (SVG)
29            <svg
30                class="w-4 h-4 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 cursor-help transition-colors"
31                fill="currentColor"
32                viewBox="0 0 20 20"
33                xmlns="http://www.w3.org/2000/svg"
34            >
35                <path
36                    fill-rule="evenodd"
37                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
38                    clip-rule="evenodd"
39                />
40            </svg>
41
42            // Tooltip text (appears on hover)
43            <span class="invisible group-hover:visible absolute z-50 w-64 p-2 text-xs text-white bg-gray-900 dark:bg-gray-800 rounded shadow-lg -top-10 left-5 pointer-events-none">
44                { &props.text }
45                // Arrow pointing to icon
46                <svg
47                    class="absolute text-gray-900 dark:text-gray-800 h-2 w-full left-0 top-full"
48                    x="0px"
49                    y="0px"
50                    viewBox="0 0 255 255"
51                >
52                    <polygon class="fill-current" points="0,0 127.5,127.5 255,0"/>
53                </svg>
54            </span>
55        </span>
56    }
57}
skill_web/components/tooltip.rs

skill_web/components/
tooltip.rs
