Ant Design中tooltip、Popover继承了父元素宽高导致的样式问题

最新推荐文章于 2024-05-22 16:41:24 发布
最新推荐文章于 2024-05-22 16:41:24 发布
阅读量955 收藏
点赞数
分类专栏： 踩坑分享 文章标签： css html vue ant tooltip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40533586/article/details/120677216
版权
本文探讨了在Ant Design中，当将tooltip或Popover设置为渲染在父元素时，如何避免因继承父元素宽高导致的内容换行问题。通过提供代码示例，展示了如何通过固定宽度来解决样式挤压问题，确保组件正确显示。
摘要由CSDN通过智能技术生成

Ant Design中tooltip、Popover继承了父元素宽高导致的样式问题

【前置场景】：

tooltip、popover的样式正常在使用的时候是挂载在了body里，而非DOM流的父节点中，如果我们将tooltip渲染在父节点时（及用了AntDesign中tooltip中的getPopupContainer属性）时，会继承父元素的宽高，导致tooltip内容如果过长会自动换行

① 抛出问题：如下图，样式被挤压

在这里插入图片描述

② 解决后的效果图，如下：
在这里插入图片描述

③解决办法，代码截图如下：

加一个固定的宽度

在这里插入图片描述

你问我不问
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
antd使用tooltip的时候遇到的坑
xiaocuizao的博客
11-28 1万+
在使用表格展示数据的时候，表格每一列的宽度是固定的，当单元格数据过多时，就会需要做溢出隐藏处理，当鼠标滑过（或点击等）的时候，展示该单元格的全部内容 columns = [ { title: '描述', dataIndex: 'desc',key:"desc", onCell: () => { return { style: ...
React antd使用踩坑总结2
CD2N_Queen的博客
11-11 1443
前端
Ant-Design的Tooltip如何只在内容溢出时显示，内容不溢出时不显示
licongmingli的博客
11-30 754
scollHeight：元素内容高度，包括溢出的不可见内容。（可视区域高度+被隐藏区域高度，当内容没有溢出时clientHeight ===> scollHeight ）clientHeight ：元素像素实际高度。（内容有溢出时，理解为可视区域高度）写一个方法阻止鼠标事件，及时页面有多个Tooltip也可以重复使用该方法！
React 修改Antd Popover弹出框的样式
最新发布
niuniu_mango的博客
05-22 306
我看网上都是说用 overlayClassName 属性，进行修改。但是本人没有成功，所以选择了 overlayInnerStyle 属性。不纠结了，实现就行啦~React，如果想修改Antd的Popover组件的背景色，可以使用 overlayInnerStyle 属性。
el-tooltip宽度超过父容器的宽度,导致提示框不跟随文字内容
u010328533的博客
10-26 286
实现方式为: 给 tooltip一个display属性,除inline以外的任意值。
tooltip的api【getPopupContainer】
y_yinkedada的博客
03-22 5167
使用tooltip或者其他使用之后，节点与当前页面节点不同级的组件，他们都会有个类似getPopupContainer的API，官方介绍用法：Function(triggerNode)，默认值是() => document.body。 这样的结果就是： tooltip组件绑定在了body上面，和我们当前页面的层级是平级，那如果想要自定义组件里面的内容，样式用了scoped的话，就改不了。不免要改全局样式。 所以就要加上getPopupContainer这个属性，写法 : 将改组件绑定到当前用到该组件
Antd Table + Tooltip 时Tooltip无法跟随单元格移动——getPopupContainer改变Tooltip浮层渲染父节点
qq_43430964的博客
07-13 4043
Antd Table + Tooltip 时Tooltip无法跟随单元格移动——getPopupContainer改变Tooltip浮层渲染父节点
有关el-popover在屏幕尺寸改变后不显示问题
飞翔的小白
12-13 1672
el-popover默认将弹窗放到body中，如图： 根据官方文档，只要修改弹框el-popover放入到父级div中即可： 配置如下： :append-to-body="false" :popper-options="{ boundariesElement: 'body', gpuAcceleration: true, positionFixed: true, preventOverflow: true }" 配置后，在查看元素，发现，已经不在body下，而是放在.
Tooltip 指提示框，Popover 指弹出框使用标签文本换行问题
DJCBPL的专栏
05-10 911
也就是说HTML在Tooltip中或是在data-content="“”没有起作用。好在我找到了data-html属性，可以使得在Tooltip中使用HTML，加上data-html="true"后换行起作用了，的Tooltip功能时遇到个小问题：换行问题。显示的提示内容有两行，而且有序号1和2，最初想到的就是怎么简单怎么来；直接在title=" “或者是ata-content=” “里边直接放入””，我也是这么做的，可惜这在Tooltip中不管用。Tooltip直接把””当作文字显示出来了。
antd中tooltip换行_antd源码解读（二）Tooltip组件解析
weixin_39524959的博客
12-20 514
引言antd的Tooltip组件在react-componment/trigger的基础上进行封装，而组件Popover和Popconfirm是使用Tooltip组件的进行pop，在react-componment中，使用到组件tc-trigger的还有menu、select、dropdown、time-picker、calendar等，本文主要对tc-trigger源码进行解读。结构项目结构如下...
全面解析Bootstrap中tooltip、popover的使用方法
09-02
Bootstrap中的Tooltip和Popover是两种常用的交互元素，它们为用户提供额外的信息提示。本文将深入解析这两种组件的使用方法以及它们的实现原理。 首先，我们来看Tooltip（提示框）。Tooltip主要用于在鼠标悬停在...
element中利用tooltip实现文字超出框悬浮显示
01-20
之前遇到过这个需求，所以就把自己的成果和大家分享下成果^ ^ 我是利用了element-ui里面的tooltip组件进行一个二次封装，大家可以直接粘贴复制查看效果。。。话不多说，直接上代码 {{content||'-'}} export default { name: 'textTooltip', props: { // 显示的文字内容 content: { type: String, default: () => { return '' }
ant design axure 元件库
11-16
在Axure中使用"Ant Design Axure 元件库"，设计师可以方便地拖拽预设的Ant Design风格的UI组件，如按钮、表单、布局、导航等，来构建高保真度的原型。这对于后端设计人员来说，意味着可以更快速、准确地将设计思想...
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
12-12
tooltip和popover是轻量的、可扩展的、用于提示的指令。对于移动端来讲，这两个指令虽然可以正常工作，但是从用户体验的角度并不推荐使用。 先说tooltip，tooltip有三种使用方式： （1）uib-tooltip 定义提示的文本 ...
Element Plus el-tooltip嵌套el-popover
我不会敲代码
06-25 1499
需求在按钮中鼠标移入显示Tooltip文字提示,点击显示Popover提示框。
使用antd中Tooltip和Popover组件时鼠标悬浮出现闪动情况
lml21lml的博客
05-18 4094
在使用antd 中Tooltip和Popover组件时,当trigger的状态为“hover"时，鼠标第一次移上去会出现闪动，第二次移上去处于正常状态，解决闪动的办法是：设置这个属性---->forceRender={true} <Popover trigger="hover" placement="top" arrowPointAtCenter={true} forceRender={true} //重要位置 /> ...
vue element Tooltip套用Popover
weixin_43994434的博客
11-29 1822
需求:同一个图标,鼠标移入显示提示语,点击显示列表 鼠标移入: 鼠标点击: <template> <div class="table-list"> <!-- 注意点1: 使用 tooltip 将 popover 包裹住, 如果是 popover 包裹 tooltip 会导致显示问题 -- <el-tooltip class="item" effect="dark" content="Top Ce...
使ToolTip里面的内容换行。
weixin_34112030的博客
10-09 1695
效果如下图： 只需要在代码行ToolTip的内容重插入： &lt;body&gt;     &lt;form id="form1" runat="server"&gt;         &lt;asp:Button ID="Button1" runat="server" CommandName="a1" OnCommand="Button2_C
Ant Design Vue 对话框 Modal body限制高度
lilawliet的博客
07-18 1635
Ant Design Vue 对话框 Modal body限制高度
Ant Design of Vue 中的Tooltip如何使用
04-28
Ant Design of Vue 中的 Tooltip 组件可以通过以下步骤使用： 1. 在 Vue 组件中引入 Tooltip 组件： ``` import { Tooltip } from 'ant-design-vue'; ``` 2. 在模板中使用 Tooltip 组件： ``` <Tooltip title="这是一个提示"> <a href="#">Hover Me</a> </Tooltip> ``` 其中， `title` 属性为 Tooltip 的提示内容。 3. 可以通过其他属性来定制 Tooltip 的展示方式，例如： - `placement`：提示框的位置，可选值为 `top`、`left`、`right`、`bottom`、`topLeft`、`topRight`、`bottomLeft`、`bottomRight`、`leftTop`、`leftBottom`、`rightTop`、`rightBottom`； - `arrowPointAtCenter`：箭头是否指向目标元素的中心，默认为 `false`； - `overlayClassName`：自定义提示框的类名。 完整代码示例： ``` <template> <div> <Tooltip title="这是一个提示" placement="topLeft" arrowPointAtCenter overlayClassName="custom-tooltip"> <a href="#">Hover Me</a> </Tooltip> </div> </template> <script> import { Tooltip } from 'ant-design-vue'; export default { components: { Tooltip, }, }; </script> <style> .custom-tooltip { background-color: #f0f0f0; } </style> ``` 以上就是 Ant Design of Vue 中 Tooltip 组件的基本使用方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你问我不问

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值