element-plus/docs/examples/popover/basic-usage.vue
jeremywu dd19cae2bc
refactor(components): popper composables (#5035)
* refactor(components): popper composables

- Refactor popper composables

* updates

* updates for tooltip

* Updates for popper. TODO: fix controlled tooltip animation

* Fix controlled mode popper animation issue

* Add new feature for customizing tooltip theme

* Fix popover and popconfirm error

* - Add Collection component for wrapping a collection of component
- Add FocusTrap component for trap focus for popups
- Add RovingFocus component for roving focus component type
- Adjust dropdown component based on these newly added components
- Add popper-trigger component for placing the trigger
- TODO: Finish current dropdown component, and all component's tests plus documents

* Refactor popper

* Complete organizing popper

* Almost finish dropdown

* Update popper tests

* update only-child test

* Finish focus trap component test

* Finish tooltip content test

* Finish tooltip trigger tests

* Finish tooltip tests

* finish tests for Collection and RovingFocusGroup

* Fix test cases for timeselect & select & popover

* Fix popover, popconfirm, menu bug and test cases

* Fix select-v2 test error caused by updating popper

* Fix date-picker test issue for updating popper

* fix test cases

* Fix eslint

* Rebase dev & fix tests

* Remove unused code
2022-01-04 09:15:15 +08:00

57 lines
1.2 KiB
Vue

<template>
<el-popover
placement="top-start"
title="Title"
:width="200"
trigger="hover"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button>Hover to activate</el-button>
</template>
</el-popover>
<el-popover
placement="bottom"
title="Title"
:width="200"
trigger="click"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button>Click to activate</el-button>
</template>
</el-popover>
<el-popover
ref="popover"
placement="right"
title="Title"
:width="200"
trigger="focus"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button>Focus to activate</el-button>
</template>
</el-popover>
<el-popover
v-model:visible="visible"
placement="bottom"
title="Title"
:width="200"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button @click="visible = !visible">Manual to activate</el-button>
</template>
</el-popover>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
</script>