“<el-tooltip :disabled="isOverflow" :content="item.name" placement="top"> <div ref="bottomTitle" class="bottomTitle"> {{ item.name }} </div> </el-tooltip>”需要实现内部item.name不超出外层div的时候,鼠标移过不显示tooltip
时间: 2023-12-21 09:06:00 浏览: 38
react-portal-tooltip:很棒的React工具提示
您可以通过以下方式实现内部的 `item.name` 不超出外层 `div` 时,鼠标移过不显示 `tooltip`:
```html
<el-tooltip :disabled="!isOverflow" :content="item.name" placement="top">
<div ref="bottomTitle" class="bottomTitle" v-if="isOverflow">
{{ item.name }}
</div>
<div ref="bottomTitle" class="bottomTitle" v-else>
{{ item.name }}
</div>
</el-tooltip>
```
在上述代码中,我们使用 `v-if` 和 `v-else` 来根据 `isOverflow` 的值来控制是否显示 `div` 元素。当 `isOverflow` 为 `true` 时,表示 `item.name` 超出了外层 `div` 的宽度,此时显示 `tooltip`。当 `isOverflow` 为 `false` 时,表示 `item.name` 没有超出外层 `div` 的宽度,此时不显示 `tooltip`。
请注意,您需要根据实际需要设置 `isOverflow` 的值,以正确控制是否显示 `tooltip`。
阅读全文