Popover

The floating card popped by clicking or hovering.

Import: import { Popover } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

When To Use

A simple popup menu to provide extra information or operations. Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.

Basic Usage

() => {
  const content = (
    <div>
      <p>Content</p>
      <p>Content</p>
    </div>
  )
  return (
    <Popover content={content} title="title">
      <Button type="primary">Hover me</Button>
    </Popover>
  )
}

1
() => {
2
  const content = (
3
    <div>
4
      <p>Content</p>
5
      <p>Content</p>
6
    </div>
7
  )
8
  return (
9
    <Popover content={content} title="title">
10
      <Button type="primary">Hover me</Button>
11
    </Popover>
12
  )
13
}
14

Style

() => (
  <div>
    <Popover
      title="popover title"
      content="Display additional, floating content on click"
      maxWidth={200}
      width={150}
    >
      <Button radius="xl">KubeSphere</Button>
    </Popover>
  </div>
)

1
() => (
2
  <div>
3
    <Popover
4
      title="popover title"
5
      content="Display additional, floating content on click"
6
      maxWidth={200}
7
      width={150}
8
    >
9
      <Button radius="xl">KubeSphere</Button>
10
    </Popover>
11
  </div>
12
)
13