# eltooltip错位的一个解决方法
* 抖音：
* B站：
> Demo
>
>
大家看这个滑块啊
他有一个Tootip
然后Tootip的效果就
鼠标悬停上去就显示
移出就不显示
然后呢这个Tootip还是可以彻底隐藏掉
大家看怎么也不显示
但是啊这个不够用
一个小伙伴想要一个这样的效果
就是鼠标旋停上去并不显示
只有在点击的时候才显示
然后进行拖拽
松手然后呢鼠标再旋停还是不显示
但是呢有一个BUG
大家注意看
这个时候再点击的时候
这个tooltep跑到最前面去了
稍微拖拽一点他就跟过来了
那老粉丝可能都知道
关于这个tooltip错位的问题
我曾经也讲过
具体的底层逻辑大家可以看这期视频
那我们就说今天这个问题怎么去解决
首先呢我们在这写一个ref
比如我们就叫slider
然后呢我们在
点击的时候先做一个输出
console.log(this.$refs.sld)
好我们把控制台打开啊
清空一下
注意点击这个找到这个组件了
然后呢我们把它展开
找到里边这个$refs
因为它组件嵌套组件
我们要找到最终那个poper（口误：tooltip）组件
大家看
这个slider不用管它这是一个HTML元素
我们找到这个button
这是一个vue组件
把它展开
再往下找它还有$refs
我们再把它展开
仍旧，这个button不用管它
往下找这个tooltip
大家看我们就找到这个tooltip了
tooltip里边它还会有一个updatePopper方法
我们就要调
这个方法来更新它位置就好了
我们右键选择这个copy property path
然后呢我们在这
点
把这个拿过来
然后把它剪切一下放到下边执行一下
调一下这个 updatePopper() 方法
然后这个是鼠标按下
我们在鼠标松开的时候再调用一下
好我们再来试一下啊
好我们来看啊，点击：出现
松开、
再点击大家看这个位置就不会串了
再滑这样这个问题就解决了
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sunzsh.gitbook.io/xiaoshan.bug/eltooltip-cuo-wei-de-yi-ge-jie-jue-fang-fa.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.