Acumatica 工具提示位置

Question

我有一个代码：

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

屏幕上是这样的：

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

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

Answer 1

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

1. 导航到网站的基本文件夹并进入 App_Themes 文件夹。
2. 将 Default 文件夹复制到同一个 App_Themes 文件夹，并为您的自定义主题重新命名。
3. 导航回网站的基本文件夹并进入 Content 文件夹。
4. 将 Site.css 文件复制到 Site[自定义主题名称].css（在我的例子中，我的主题是 Brian，所以我的 css 文件将是 SiteBrian.css。
5. 编辑您的自定义主题 css 文件。
6. 导航回 App_Themes[自定义主题名称] 文件夹并打开 00_Controls.css 样式表。
7. 找到 #tooltip 部分（在文件中作为 Tooltip Css 类引用）并应用您的编辑。
8. 在 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);
}

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