tooltip

Tooltip can be used to show a message when hovering over an element.

Base Tooltip

tooltip = SingleValueFactory("tooltip", "Base tooltip component") # Base tooltip component
tooltip_content = SingleValueFactory("tooltip-content", "Optional. Setting a div as the content of the tooltip instead of the `data-tip` text") # Base tooltip content part

Tooltip Placement

---

source

TooltipPlacement

 TooltipPlacement (value, names=None, module=None, qualname=None,
                   type=None, start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

Tooltip Modifiers

---

source

TooltipModifier

 TooltipModifier (value, names=None, module=None, qualname=None,
                  type=None, start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

Tooltip Colors

Tooltip Test Examples

---

source

test_tooltip_basic_examples

 test_tooltip_basic_examples ()

Test basic tooltip utilities.

def test_tooltip_basic_examples():
    """Test basic tooltip utilities."""
    # Basic tooltip
    assert str(tooltip) == "tooltip"
    assert str(tooltip_content) == "tooltip-content"
    
    # Test with modifiers
    assert str(tooltip.hover) == "hover:tooltip"
    assert str(tooltip.md) == "md:tooltip"
    assert str(tooltip.dark) == "dark:tooltip"

# Run the tests
test_tooltip_basic_examples()

---

source

test_tooltip_placement_examples

 test_tooltip_placement_examples ()

Test tooltip placement options.

def test_tooltip_placement_examples():
    """Test tooltip placement options."""
    assert str(tooltip_placement.top) == "tooltip-top"
    assert str(tooltip_placement.bottom) == "tooltip-bottom"
    assert str(tooltip_placement.left) == "tooltip-left"
    assert str(tooltip_placement.right) == "tooltip-right"

# Run the tests
test_tooltip_placement_examples()

---

source

test_tooltip_modifiers_examples

 test_tooltip_modifiers_examples ()

Test tooltip modifier utilities.

def test_tooltip_modifiers_examples():
    """Test tooltip modifier utilities."""
    assert str(tooltip_modifiers.open) == "tooltip-open"

# Run the tests
test_tooltip_modifiers_examples()

---

source

test_tooltip_colors_examples

 test_tooltip_colors_examples ()

Test tooltip color variants.

def test_tooltip_colors_examples():
    """Test tooltip color variants."""
    # All color variants
    assert str(tooltip_colors.neutral) == "tooltip-neutral"
    assert str(tooltip_colors.primary) == "tooltip-primary"
    assert str(tooltip_colors.secondary) == "tooltip-secondary"
    assert str(tooltip_colors.accent) == "tooltip-accent"
    assert str(tooltip_colors.info) == "tooltip-info"
    assert str(tooltip_colors.success) == "tooltip-success"
    assert str(tooltip_colors.warning) == "tooltip-warning"
    assert str(tooltip_colors.error) == "tooltip-error"
    
    # With modifiers
    assert str(tooltip_colors.primary.hover) == "hover:tooltip-primary"
    assert str(tooltip_colors.success.focus) == "focus:tooltip-success"

# Run the tests
test_tooltip_colors_examples()

---

source

test_tooltip_basic_fasthtml_examples

 test_tooltip_basic_fasthtml_examples ()

Test basic tooltip examples from daisyUI v5 documentation.

def test_tooltip_basic_fasthtml_examples():
    """Test basic tooltip examples from daisyUI v5 documentation."""
    from fasthtml.common import Div, Button
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Basic tooltip
    basic_tooltip = Div(
        Button("Hover me", cls=str(btn)),
        cls=str(tooltip),
        data_tip="hello"
    )
    
    # Verify structure
    assert basic_tooltip.tag == "div"
    assert basic_tooltip.attrs['class'] == "tooltip"
    assert basic_tooltip.attrs['data-tip'] == "hello"
    assert basic_tooltip.children[0].tag == "button"
    assert basic_tooltip.children[0].attrs['class'] == "btn"
    assert basic_tooltip.children[0].children[0] == "Hover me"
    
    # Force open tooltip
    force_open = Div(
        Button("Force open", cls=str(btn)),
        cls=combine_classes(tooltip, tooltip_modifiers.open),
        data_tip="hello"
    )
    
    assert force_open.tag == "div"
    assert "tooltip" in force_open.attrs['class']
    assert "tooltip-open" in force_open.attrs['class']
    assert force_open.attrs['data-tip'] == "hello"
    assert force_open.children[0].children[0] == "Force open"
    
    return Div(basic_tooltip, force_open)

# Run the tests
test_tooltip_basic_fasthtml_examples()

<div>
  <div data-tip="hello" class="tooltip">
<button class="btn">Hover me</button>  </div>
  <div data-tip="hello" class="tooltip tooltip-open">
<button class="btn">Force open</button>  </div>
</div>

test_func = test_tooltip_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_tooltip_with_content_fasthtml_examples

 test_tooltip_with_content_fasthtml_examples ()

Test tooltip with tooltip-content from daisyUI v5 documentation.

def test_tooltip_with_content_fasthtml_examples():
    """Test tooltip with tooltip-content from daisyUI v5 documentation."""
    from fasthtml.common import Div, Button
    from cjm_fasthtml_tailwind.utilities.transitions_and_animation import animate
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.transforms import rotate
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Tooltip with tooltip-content
    tooltip_with_content = Div(
        Div(
            Div(
                "Wow!",
                cls=combine_classes(
                    animate.bounce,
                    text_color.orange._400,
                    rotate(10, negative=True),
                    font_size._2xl,
                    font_weight.black
                )
            ),
            cls=str(tooltip_content)
        ),
        Button("Hover me", cls=str(btn)),
        cls=str(tooltip)
    )
    
    # Verify structure
    assert tooltip_with_content.tag == "div"
    assert tooltip_with_content.attrs['class'] == "tooltip"
    
    # Verify tooltip-content div
    content_div = tooltip_with_content.children[0]
    assert content_div.tag == "div"
    assert content_div.attrs['class'] == "tooltip-content"
    
    # Verify animated content
    animated_div = content_div.children[0]
    assert animated_div.tag == "div"
    assert "animate-bounce" in animated_div.attrs['class']
    assert "text-orange-400" in animated_div.attrs['class']
    assert "-rotate-10" in animated_div.attrs['class']
    assert "text-2xl" in animated_div.attrs['class']
    assert "font-black" in animated_div.attrs['class']
    assert animated_div.children[0] == "Wow!"
    
    # Verify button
    button = tooltip_with_content.children[1]
    assert button.tag == "button"
    assert button.attrs['class'] == "btn"
    assert button.children[0] == "Hover me"
    
    return tooltip_with_content

# Run the tests
test_tooltip_with_content_fasthtml_examples()

<div class="tooltip">
  <div class="tooltip-content">
    <div class="animate-bounce text-orange-400 -rotate-10 text-2xl font-black">Wow!</div>
  </div>
<button class="btn">Hover me</button></div>

test_func = test_tooltip_with_content_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_tooltip_positions_fasthtml_examples

 test_tooltip_positions_fasthtml_examples ()

Test tooltip position variations from daisyUI v5 documentation.

def test_tooltip_positions_fasthtml_examples():
    """Test tooltip position variations from daisyUI v5 documentation."""
    from fasthtml.common import Div, Button
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Top position
    top_tooltip = Div(
        Button("Top", cls=str(btn)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_placement.top),
        data_tip="hello"
    )
    assert "tooltip" in top_tooltip.attrs['class']
    assert "tooltip-open" in top_tooltip.attrs['class']
    assert "tooltip-top" in top_tooltip.attrs['class']
    assert top_tooltip.attrs['data-tip'] == "hello"
    assert top_tooltip.children[0].children[0] == "Top"
    
    # Bottom position
    bottom_tooltip = Div(
        Button("Bottom", cls=str(btn)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_placement.bottom),
        data_tip="hello"
    )
    assert "tooltip-bottom" in bottom_tooltip.attrs['class']
    assert bottom_tooltip.children[0].children[0] == "Bottom"
    
    # Left position
    left_tooltip = Div(
        Button("Left", cls=str(btn)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_placement.left),
        data_tip="hello"
    )
    assert "tooltip-left" in left_tooltip.attrs['class']
    assert left_tooltip.children[0].children[0] == "Left"
    
    # Right position
    right_tooltip = Div(
        Button("Right", cls=str(btn)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_placement.right),
        data_tip="hello"
    )
    assert "tooltip-right" in right_tooltip.attrs['class']
    assert right_tooltip.children[0].children[0] == "Right"
    
    return Div(top_tooltip, bottom_tooltip, left_tooltip, right_tooltip)

# Run the tests
test_tooltip_positions_fasthtml_examples()

<div>
  <div data-tip="hello" class="tooltip tooltip-open tooltip-top">
<button class="btn">Top</button>  </div>
  <div data-tip="hello" class="tooltip tooltip-open tooltip-bottom">
<button class="btn">Bottom</button>  </div>
  <div data-tip="hello" class="tooltip tooltip-open tooltip-left">
<button class="btn">Left</button>  </div>
  <div data-tip="hello" class="tooltip tooltip-open tooltip-right">
<button class="btn">Right</button>  </div>
</div>

test_func = test_tooltip_positions_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_tooltip_colors_fasthtml_examples

 test_tooltip_colors_fasthtml_examples ()

Test tooltip color variations from daisyUI v5 documentation.

def test_tooltip_colors_fasthtml_examples():
    """Test tooltip color variations from daisyUI v5 documentation."""
    from fasthtml.common import Div, Button
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    
    # Neutral color
    neutral_tooltip = Div(
        Button("neutral", cls=combine_classes(btn, btn_colors.neutral)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.neutral),
        data_tip="neutral"
    )
    assert "tooltip" in neutral_tooltip.attrs['class']
    assert "tooltip-open" in neutral_tooltip.attrs['class']
    assert "tooltip-neutral" in neutral_tooltip.attrs['class']
    assert neutral_tooltip.attrs['data-tip'] == "neutral"
    assert "btn-neutral" in neutral_tooltip.children[0].attrs['class']
    
    # Primary color
    primary_tooltip = Div(
        Button("primary", cls=combine_classes(btn, btn_colors.primary)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.primary),
        data_tip="primary"
    )
    assert "tooltip-primary" in primary_tooltip.attrs['class']
    assert primary_tooltip.attrs['data-tip'] == "primary"
    assert "btn-primary" in primary_tooltip.children[0].attrs['class']
    
    # Secondary color
    secondary_tooltip = Div(
        Button("secondary", cls=combine_classes(btn, btn_colors.secondary)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.secondary),
        data_tip="secondary"
    )
    assert "tooltip-secondary" in secondary_tooltip.attrs['class']
    assert "btn-secondary" in secondary_tooltip.children[0].attrs['class']
    
    # Accent color
    accent_tooltip = Div(
        Button("accent", cls=combine_classes(btn, btn_colors.accent)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.accent),
        data_tip="accent"
    )
    assert "tooltip-accent" in accent_tooltip.attrs['class']
    assert "btn-accent" in accent_tooltip.children[0].attrs['class']
    
    # Info color
    info_tooltip = Div(
        Button("info", cls=combine_classes(btn, btn_colors.info)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.info),
        data_tip="info"
    )
    assert "tooltip-info" in info_tooltip.attrs['class']
    assert "btn-info" in info_tooltip.children[0].attrs['class']
    
    # Success color
    success_tooltip = Div(
        Button("success", cls=combine_classes(btn, btn_colors.success)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.success),
        data_tip="success"
    )
    assert "tooltip-success" in success_tooltip.attrs['class']
    assert "btn-success" in success_tooltip.children[0].attrs['class']
    
    # Warning color
    warning_tooltip = Div(
        Button("warning", cls=combine_classes(btn, btn_colors.warning)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.warning),
        data_tip="warning"
    )
    assert "tooltip-warning" in warning_tooltip.attrs['class']
    assert "btn-warning" in warning_tooltip.children[0].attrs['class']
    
    # Error color
    error_tooltip = Div(
        Button("error", cls=combine_classes(btn, btn_colors.error)),
        cls=combine_classes(tooltip, tooltip_modifiers.open, tooltip_colors.error),
        data_tip="error"
    )
    assert "tooltip-error" in error_tooltip.attrs['class']
    assert "btn-error" in error_tooltip.children[0].attrs['class']
    
    return Div(
        neutral_tooltip,
        primary_tooltip,
        secondary_tooltip,
        accent_tooltip,
        info_tooltip,
        success_tooltip,
        warning_tooltip,
        error_tooltip
    )

# Run the tests
test_tooltip_colors_fasthtml_examples()

<div>
  <div data-tip="neutral" class="tooltip tooltip-open tooltip-neutral">
<button class="btn btn-neutral">neutral</button>  </div>
  <div data-tip="primary" class="tooltip tooltip-open tooltip-primary">
<button class="btn btn-primary">primary</button>  </div>
  <div data-tip="secondary" class="tooltip tooltip-open tooltip-secondary">
<button class="btn btn-secondary">secondary</button>  </div>
  <div data-tip="accent" class="tooltip tooltip-open tooltip-accent">
<button class="btn btn-accent">accent</button>  </div>
  <div data-tip="info" class="tooltip tooltip-open tooltip-info">
<button class="btn btn-info">info</button>  </div>
  <div data-tip="success" class="tooltip tooltip-open tooltip-success">
<button class="btn btn-success">success</button>  </div>
  <div data-tip="warning" class="tooltip tooltip-open tooltip-warning">
<button class="btn btn-warning">warning</button>  </div>
  <div data-tip="error" class="tooltip tooltip-open tooltip-error">
<button class="btn btn-error">error</button>  </div>
</div>

test_func = test_tooltip_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_tooltip_responsive_fasthtml_examples

 test_tooltip_responsive_fasthtml_examples ()

Test responsive tooltip from daisyUI v5 documentation.

def test_tooltip_responsive_fasthtml_examples():
    """Test responsive tooltip from daisyUI v5 documentation."""
    from fasthtml.common import Div, Button
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Responsive tooltip - only shows on large screens
    responsive_tooltip = Div(
        Button("Hover me", cls=str(btn)),
        cls=str(tooltip.lg),
        data_tip="hello"
    )
    
    # Verify structure
    assert responsive_tooltip.tag == "div"
    assert responsive_tooltip.attrs['class'] == "lg:tooltip"
    assert responsive_tooltip.attrs['data-tip'] == "hello"
    assert responsive_tooltip.children[0].tag == "button"
    assert responsive_tooltip.children[0].attrs['class'] == "btn"
    assert responsive_tooltip.children[0].children[0] == "Hover me"
    
    return responsive_tooltip

# Run the tests
test_tooltip_responsive_fasthtml_examples()

<div data-tip="hello" class="lg:tooltip">
<button class="btn">Hover me</button></div>

test_func = test_tooltip_responsive_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()