vis.js节点/边添加title后hover提示框出现在左下角异常如何解决

你给节点添加title属性的代码逻辑没有问题，异常是vis.js内置.vis-tooltip元素的默认样式被项目全局样式覆盖导致的，可按以下方案修复：

• 直接在全局样式文件中添加CSS规则强制指定提示框定位属性，即可解决错位问题：

.vis-tooltip {
  position: absolute !important;
  /* 以下为vis.js官方默认配套样式，可一并添加避免其他显示异常 */
  padding: 5px 8px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1001;
  pointer-events: none;
}

• 若使用Vue、React等带样式隔离的前端框架，需注意样式生效范围：
  • Vue项目可在带scoped的样式块中使用::v-deep .vis-tooltip作为选择器
  • React CSS Module项目可使用:global(.vis-tooltip)作为选择器
• 可选排查：检查全局样式表中是否存在对所有div统一设置position属性的重置规则，避免后续再次出现样式冲突

效果参考 #

• 异常状态下提示框固定在图谱左下角：
  
• 修复后提示框正常显示在光标位置：
  

内容的提问来源于stack exchange，提问作者Nicolas