Javascript 针灸工具提示位置

我有一个密码：

 <div>
     <px:PXImage runat="server" ImageUrl="~/Icons/info.png" Enabled="False" Height="16" Width="16"
                                             ToolTip="Excludes current pay amount." />
 </div>

在屏幕上看起来像这样：

正如您所见，工具时间隐藏了另一个UI元素。此外，我的需求希望工具提示显示在右侧，如下所示：

---

这是否可以更改Acumatica框架中工具提示的位置（如圆形图标右侧带有黄色UI元素的屏幕截图）？

我不擅长层叠样式表，但这是Acumatica主题使用的层叠样式表的功能。幸运的是，制作自己的主题版本非常简单。我知道这个答案并不能让你完全到达终点线，但希望有人能在这个答案的基础上，得到定位工具提示所需的准确更改。我确实设法重新创建了一个箭头和方框颜色变化的示例，包括移除Acumatica标准主题使用的蓝色箭头

导航到网站的基本文件夹并进入 应用程序主题文件夹

将默认文件夹复制到相同的应用程序主题文件夹中，并为自定义主题赋予新名称

导航回网站的基本文件夹并进入内容文件夹

将Site.css文件复制到Site[custom theme name].css（在我的例子中，我的主题是Brian，所以我的css文件将是SiteBrian.css）

编辑自定义主题css文件

导航回应用程序主题[自定义主题名称]文件夹并打开00\u Controls.css样式表

找到#tooltip（在文件中作为tooltip Css类引用）的部分并应用您的编辑

在Acumatica中，导航到“站点首选项”，然后选择自定义主题。保存该主题并刷新正在测试工具提示更改的页面时，您应该会看到相应的工具提示调整

不幸的是，我无法确定如何调整工具提示div的位置，使其位于您希望它位于对象旁边的位置。但是，如果您能够确定位置，这就是我获得工具提示外观（错误）的方法

在00_Controls.css中：

/*------------------ Tooltip Css classes ------------------ */
#tooltip {
  font-size: 13px;
  border-radius: 5px;
  background-color: #007ACC;
  background-color: var(--primary-color, #007ACC);
  border: 1px solid #007ACC;
  border: 1px solid var(--primary-color, #007ACC);
  color: RGBA(255, 255, 255, 0.87);
  font-weight: 700;
  margin: 0px;
  padding: 5px;
  min-width: 80px;
  word-wrap: break-word;
  position: absolute;
  top: -5px;
  left: 105%;
}

#tooltip a {
  color: RGBA(0, 0, 0, 0.87);
  font-size: 11px;
  float: right;
}

#tooltip .arrow {
  width: 50px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

#tooltip .arrow.top {
  top: -16px;
  bottom: auto;
}

#tooltip .arrow.left {
  left: 20%;
}

/* Comment this out to remove the blue arrow Acumatica uses
#tooltip .arrow:after {
  background-color: #007ACC;
  background-color: var(--primary-color, #007ACC);
  border: 1px solid #007ACC;
  border: 1px solid var(--primary-color, #007ACC);
  content: "";
  position: absolute;
  left: 200px;
  top: -200px;
  width: 25px;
  height: 25px;
  transform: rotate(45deg);
}
*/

#tooltip .arrow.top:after {
  bottom: -20px;
  top: auto;
}

#tooltip.error, .arrow:after {
  background-color: RGBA(230, 197, 67, 0.87);
  border-color: RGBA(230, 197, 67, 0.87);
  color: RGBA(0, 0, 0, 0.87);
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
}

#tooltip.error::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent RGBA(230, 197, 67, 0.87) transparent transparent;
}

#tooltip.warn, #tooltip.warn .arrow:after {
  background-color: #ffeb3b;
  border-color: Brown;
  color: RGBA(0, 0, 0, 0.87);
}

---

我对样式表中所需的更改感兴趣，如果您想知道如何将位置设置为右侧。

Brian，您好，工具提示似乎仍在隐藏下面的UI元素。这是最初的问题，当时工具提示隐藏了另一个元素，我们想将工具提示放在菜单的右侧。这里有“铅笔”图标。可能需要“播放”使用CSS样式。但是在目标页面上应用它是否可能只是为了避免覆盖整个工具提示？我和你一样，没有弄清楚这一部分。我在研究中发现，将它放在右边的示例在样式表中作为嵌套在DIV中的工具提示的跨度是非常容易的。但是，看起来工具提示是它自己的DIV。虽然我知道你可以将DIV叠加在彼此之上，但我无法理解这些设置。我确实花了几个小时试图给你一个答案，但我无法承诺任何额外的时间，所以我提供了我所能提供的。如果你找到解决方案，我真的很感兴趣。与此同时，我学会了使用自定义CSS来制作我自己的tweaks！我在网络前端方面的知识非常有限，但我的公司与莫斯科的Aucmatica开发人员密切合作，我将在下次沟通时询问这一点，并将提供答案（如果存在）。感谢您的时间和努力，Brian。