@ea-lab/reactive-json-docs
Version:
Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides
103 lines (83 loc) • 2.66 kB
YAML
renderView:
- type: Markdown
content: |
# Tooltip
Displays a Bootstrap tooltip when hovering over the element.
## Properties
- type: DefinitionList
content:
- term:
code: content
after: "(required)"
details:
type: Markdown
content: "Tooltip content (text or component)."
- term:
code: placement
after: "(string, optional)"
details:
type: Markdown
content: "Tooltip position (`top`, `bottom`, `left`, `right`)."
- type: RjBuildDescriber
title: "Tooltip Action Example"
description:
- type: Markdown
content: |
This example shows different tooltip configurations. Hover over the buttons to see the tooltips in action.
**Note**: Tooltips require Bootstrap CSS to display properly.
toDescribe:
renderView:
- type: div
content:
- type: button
content: "Hover me (top)"
actions:
- what: tooltip
content: "This is a tooltip on top."
placement: top
- " "
- type: button
content: "Hover me (bottom)"
actions:
- what: tooltip
content: "This is a tooltip on bottom."
placement: bottom
- " "
- type: button
content: "Hover me (left)"
actions:
- what: tooltip
content: "This is a tooltip on left."
placement: left
- " "
- type: button
content: "Hover me (right)"
actions:
- what: tooltip
content: "This is a tooltip on right."
placement: right
- type: br
- type: br
- type: button
content: "Dynamic tooltip"
actions:
- what: tooltip
content: ["Current time: ", ~.currentTime]
placement: top
- " "
- type: button
content: "Update time"
actions:
- what: setData
on: click
path: "currentTime"
value: "Updated!"
- type: div
content: ["Tooltip content: ", ~.currentTime]
data:
currentTime: "Not set"
- type: Markdown
content: |
## Limitation
- Requires Bootstrap CSS.
- The child component must be able to accept a React reference.