知识卡片
浮层的自动避让翻转算法
内容
Tooltip的auto定位在展开前会用元素实际宽高和父容器边界做碰撞检测:位置若超出容器就自动换到对边(比如bottom方向溢出就改用top),检测完再重新计算偏移量并应用。这种”先按首选方向渲染并测量是否溢出,溢出则整体翻转到对边”的思路,是下拉菜单、气泡卡片、右键菜单等浮层类组件定位的通用算法框架,不依赖具体实现技术。
参考来源
《深入理解Bootstrap》第5章《JavaScript插件》
知识卡片
Tooltip的auto定位在展开前会用元素实际宽高和父容器边界做碰撞检测:位置若超出容器就自动换到对边(比如bottom方向溢出就改用top),检测完再重新计算偏移量并应用。这种”先按首选方向渲染并测量是否溢出,溢出则整体翻转到对边”的思路,是下拉菜单、气泡卡片、右键菜单等浮层类组件定位的通用算法框架,不依赖具体实现技术。