C# 如何更改悬停时gridview中可用控件的工具提示背景色

我在

gridview itemtemplate

中有一个

linkbutton

控件

我想自定义该

链接按钮

控件的默认

工具提示

视图。我怎样才能做到这一点？ 这是我的网格，它已经绑定了来自另一个函数的数据

<asp:GridView ID="GridReports" runat="server" 
              OnRowDataBound="GridReports_RowDataBound"
              DataKeyNames="SubmitID" ShowFooter="true" 
              AutoGenerateColumns="false">

 <asp:TemplateField>
      <HeaderTemplate>Department Lead</HeaderTemplate>
      <HeaderStyle CssClass="HeaderStyleWidth100" />
      <ItemTemplate>
          <asp:HiddenField ID="LabelDepartmentLead" 
               Value='<%#DataBinder.Eval(Container.DataItem, "DepartmentLead")%>'
               runat="server" />
          <asp:LinkButton ID="LinkButtonView" Text="View" 
               Font-Underline="false" Font-Bold="true" ForeColor="Blue" 
               runat="server"></asp:LinkButton>
      </ItemTemplate>
      <ItemStyle HorizontalAlign="Center" CssClass="EditItemStyle" />
  </asp:TemplateField>
</asp:GridView>

---

如何识别工具提示样式并对其进行自定义。请帮忙

您可以使用JQuery库

---

单击查看源代码链接：

您可以使用JQuery库

---

点击查看源代码链接：

是的，结合Javascript和CSS我能够实现这一点。隐藏代码与问题中定义的代码相同

在这里发布-可能对其他人有帮助

项目模板

<ItemTemplate>
     <asp:HiddenField ID="LabelDepartmentLead" 
          Value='<%#DataBinder.Eval(Container.DataItem, "DepartmentLead")%>'
          runat="server" />
     <asp:LinkButton  ID="LinkButtonView" Text="View" Font-Underline="false"
          Font-Bold="true" ForeColor="Blue" runat="server"
          onmouseover="showTooltip(this)" ToolTip="Test" 
          onmouseout="hideTooltip(this)"></asp:LinkButton>
</ItemTemplate>

javascript

 <script type="text/javascript">
     function showTooltip(control) {
         var ttext = control.title;
         var tt = document.createElement('SPAN');
         var tnode = document.createTextNode(ttext);
         tt.appendChild(tnode);
         control.parentNode.insertBefore(tt, control.nextSibling);
         tt.className = "tooltipCss";
         control.title = "";
     }

     function hideTooltip(control) {
         var ttext = control.nextSibling.childNodes[0].nodeValue;
         control.parentNode.removeChild(control.nextSibling);
         control.title = ttext;
     }

     $(function () {
         $('[title]').tooltip({
             content: function () {
                 var element = $(this);
                 return element.attr('title')
             }
         });
     });

</script>

功能显示工具提示（控件）{
var ttext=control.title；
var tt=document.createElement（'SPAN'）；
var tnode=document.createTextNode（ttext）；
tt.appendChild（tnode）；
control.parentNode.insertBefore（tt，control.nextSibling）；
tt.className=“tooltipCss”；
control.title=“”；
}
功能hideTooltip（控制）{
var ttext=control.nextSibling.childNodes[0].nodeValue；
control.parentNode.removeChild（control.nextSibling）；
control.title=ttext；
}
$（函数（）{
$（“[title]”）。工具提示({
内容：功能（）{
var元素=$（此）；
返回元素.attr（'title'）
}
});
});

css

<style>
  .tooltipCss
   {
      position: absolute;
      border: 1px solid gray;
      margin: 1em;
      padding: 3px;
      background: #A4D162;
      font-family: Trebuchet MS;
      font-weight: normal;
      color: black;
      font-size: 11px;
   }
</style>

.工具提示
{
位置：绝对位置；
边框：1px纯色灰色；
边缘：1米；
填充：3倍；
背景：#A4D162；
字体系列：投石机MS；
字体大小：正常；
颜色：黑色；
字体大小：11px；
}

是的，结合Javascript和CSS我能够实现这一点。代码隐藏与问题中定义的相同

在这里发布-可能对其他人有帮助

项目模板

<ItemTemplate>
     <asp:HiddenField ID="LabelDepartmentLead" 
          Value='<%#DataBinder.Eval(Container.DataItem, "DepartmentLead")%>'
          runat="server" />
     <asp:LinkButton  ID="LinkButtonView" Text="View" Font-Underline="false"
          Font-Bold="true" ForeColor="Blue" runat="server"
          onmouseover="showTooltip(this)" ToolTip="Test" 
          onmouseout="hideTooltip(this)"></asp:LinkButton>
</ItemTemplate>

javascript

 <script type="text/javascript">
     function showTooltip(control) {
         var ttext = control.title;
         var tt = document.createElement('SPAN');
         var tnode = document.createTextNode(ttext);
         tt.appendChild(tnode);
         control.parentNode.insertBefore(tt, control.nextSibling);
         tt.className = "tooltipCss";
         control.title = "";
     }

     function hideTooltip(control) {
         var ttext = control.nextSibling.childNodes[0].nodeValue;
         control.parentNode.removeChild(control.nextSibling);
         control.title = ttext;
     }

     $(function () {
         $('[title]').tooltip({
             content: function () {
                 var element = $(this);
                 return element.attr('title')
             }
         });
     });

</script>

功能显示工具提示（控件）{
var ttext=control.title；
var tt=document.createElement（'SPAN'）；
var tnode=document.createTextNode（ttext）；
tt.appendChild（tnode）；
control.parentNode.insertBefore（tt，control.nextSibling）；
tt.className=“tooltipCss”；
control.title=“”；
}
功能hideTooltip（控制）{
var ttext=control.nextSibling.childNodes[0].nodeValue；
control.parentNode.removeChild（control.nextSibling）；
control.title=ttext；
}
$（函数（）{
$（“[title]”）。工具提示({
内容：功能（）{
var元素=$（此）；
返回元素.attr（'title'）
}
});
});

css

<style>
  .tooltipCss
   {
      position: absolute;
      border: 1px solid gray;
      margin: 1em;
      padding: 3px;
      background: #A4D162;
      font-family: Trebuchet MS;
      font-weight: normal;
      color: black;
      font-size: 11px;
   }
</style>

.工具提示
{
位置：绝对位置；
边框：1px纯色灰色；
边缘：1米；
填充：3倍；
背景：#A4D162；
字体系列：投石机MS；
字体大小：正常；
颜色：黑色；
字体大小：11px；
}

如果我没有弄错的话，这是不可能的，因为对于大多数（所有？）控件，工具提示实际上被呈现为

标题

属性，并且浏览器显示的显示此

标题

属性文本的“工具提示”无法设置样式。如果你想要一个“类似工具提示”的功能，你需要用Javascript/CSSIf实现它。如果它是一个Javascript工具提示，你需要追踪它的资产。有些工具提示仅使用javascript进行样式设置，有些工具提示还具有css规则。在浏览器控制台中检查DOM是否存在错误clues@charlietfl：它是控件的默认工具提示。我没有使用任何javascript来更改它。是否可以从“代码隐藏”更改工具提示？如果它使用浏览器默认标题工具提示，则不能设置样式，因为如果我没有弄错的话，大多数（所有？）控件的工具提示实际上呈现为

title

属性，而“工具提示”浏览器显示此

标题

属性的文本时显示的内容无法设置样式。如果你想要一个“类似工具提示”的功能，你需要用Javascript/CSSIf实现它。如果它是一个Javascript工具提示，你需要追踪它的资产。有些工具提示仅使用javascript进行样式设置，有些工具提示还具有css规则。在浏览器控制台中检查DOM是否存在错误clues@charlietfl：它是控件的默认工具提示。我没有使用任何javascript来更改它。是否可以从代码隐藏更改工具提示？如果它使用浏览器默认标题工具提示，则无法设置样式有许多工具提示不需要jQueryUI的开销，而且更灵活有许多工具提示不需要jQueryUI的开销，而且更灵活