# Popover > Popover 类似于 '', 使用 '' 组件和 'v-nly-popover' 指令可以给任何元素和组件提供消息提示 ```html

悬浮一下，你会发现奇迹

我是组件 popover 文本内容!

``` ## 总览 - Popover 使用第三方 [Popover.js](https://popper.js.org/) 进行定位 - Popover 需要使用自定义 css `nly-adminlte-vue.css` 才会有式样 - 设置 `container` prop 为 `null`（即默认值，默认情况下， `nly-popover` 是渲染到 `` 下面的）来避免在一些复杂组件中出现渲染 bug （比如 `input-group`, `button-group` 等）。可以设置 `container` 为指定的元素， `nly-popover` 会渲染到指定的元素中。 - `nly-popover` 组件或者指令 `v-nly-popover` 如果是绑定在隐藏的元素上会失效 - 在 `disabled` 的元素上绑定 `nly-popover` 组件或者指令 `v-nly-popover`，必须在其父元素上触发显示和隐藏 ## target `target` prop 指定了切换 `` 显示隐藏的元素和组件，比如一个按钮的 id 属性为 `popover-test`，则给 `nly-popover` 传入 `target='popover-test'`，那么这个 popover 的显示和隐藏便由这个按钮控制 `target` 接收的值可以是以下几种: - 普通 `HTMLElement` 或者 `SVGElement` 标签的 id 或者组件的 id。这时候传入应该是一个字符串 - 普通 `HTMLElement` 或者 `SVGElement` 的 `ref` 属性（`this.$refs.refName`） - 组件的 `ref` 属性（`this.$refs.refName`） - 一个可以返回普通 `HTMLElement` 或者 `SVGElement` 的函数 **注意：** - `target` 指向的元素或着组件必须在 `` 挂载之前出现在 `document` 中，如果在 `nly-popover` 挂载的时候， `target` 指向的元素或着组件没有在 `document` 中， `popover` 会失效 - 请确保 `nly-popover` 挂载的时候能找得到 `target` 指向的元素或着组件。 - `target` 传入函数的时候，也请注意以上两条 - `HTMLElement` 是指普通的 `html` 标签，比如 `

`, `` 等 - `SVGElement` 是指 ` 点击 [指令 popover](#) 查看更多定位 Demo ## 切换状态（Triggers） `popover` 可以使用 `click`, `hover`, `focus` 来切换可见状态。

Popover top

Popover topleft

Popover topright

Popover right

Popover righttop

Popover rightbottom

Popover bottom

Popover bottomleft

Popover bottomright

Popover left

Popover lefttop

Popover leftbottom