Acumatica工具提示位置

如何解决Acumatica工具提示位置

 <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标准主题使用的蓝色箭头。

导航到网站的基本文件夹，然后进入 App_Themes 文件夹。
将 Default 文件夹复制到相同的 App_Themes 文件夹中，并为其命名一个新的自定义主题。
导航回网站的基本文件夹，然后进入 Content 文件夹。
将Site.css文件复制到Site [自定义主题名称] .css（在我的情况下，我的主题是Brian，所以我的CSS文件将是SiteBrian.css。
编辑您的自定义主题CSS文件。
导航回到 App_Themes [自定义主题名称] 文件夹，然后打开00_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,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.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);
  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,0.87);
  color: RGBA(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,0.87) transparent transparent;
}

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

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