Class: Views::Docs::Tooltip

Inherits:
Base
  • Object
show all
Defined in:
lib/ruby_ui/tooltip/tooltip_docs.rb

Instance Method Summary collapse

Methods inherited from Base

#Alert, #AlertDescription, #AlertTitle, #Heading, #InlineCode, #InlineLink, #Text, #component_files, #docs_accordion_path, #docs_alert_dialog_path, #docs_alert_path, #docs_aspect_ratio_path, #docs_avatar_path, #docs_badge_path, #docs_installation_path, #docs_separator_path, #docs_sheet_path

Instance Method Details

#view_template ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
# File 'lib/ruby_ui/tooltip/tooltip_docs.rb', line 4

def view_template
  component = "Tooltip"

  div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
    render Docs::Header.new(title: "Tooltip", description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.")

    Heading(level: 2) { "Usage" }

    render Docs::VisualCodeExample.new(title: "Example", context: self) do
      <<~RUBY
        Tooltip do
          TooltipTrigger do
            Button(variant: :outline, icon: true) do
              bookmark_icon
            end
          end
          TooltipContent do
            Text { "Add to library" }
          end
        end
      RUBY
    end

    render Docs::VisualCodeExample.new(title: "Long content", context: self) do
      <<~RUBY
        Tooltip do
          TooltipTrigger do
            Button(variant: :outline) { "Hover me" }
          end
          TooltipContent do
            Text { "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }
          end
        end
      RUBY
    end

    render Components::ComponentSetup::Tabs.new(component_name: component)

    render Docs::ComponentsTable.new(component_files(component))
  end
end