如何在悬停时更改 gridview 内部可用控件的工具提示的背景颜色

Question

我在 gridview itemtemplate 中有一个 linkbutton 控件。

我想自定义 linkbutton 控件的默认 tooltip 视图。我怎样才能做到这一点？这是我的网格，它已经是来自另一个函数的绑定数据。

<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>

这是我的 DataBound，我在其中为 LinkButton 控件分配工具提示（这是默认的工具提示样式）。

protected void GridReports_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.DataItem != null)
    {
        HiddenField LabelDepartmentLead = 
                   (HiddenField)e.Row.FindControl("LabelDepartmentLead");
        LinkButton LinkButtonView = 
                   (LinkButton)e.Row.FindControl("LinkButtonView");
        if (LabelDepartmentLead.Value == string.Empty)
        {
            LabelDepartmentLead.Value = "No Department Leads";
        }
        LinkButtonView.ToolTip = LabelDepartmentLead.Value;
    }
}

如何识别工具提示样式并自定义它。请帮忙！

Answer 1

您可以使用 JQuery 库。

点击查看源码link：http://jqueryui.com/tooltip/#custom-style

Answer 2

是的结合Javascript和CSS我能够实现this.Code后面仍然与问题中定义的相同。

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

项目模板

<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>

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>

如何在悬停时更改 gridview 内部可用控件的工具提示的背景颜色

How to change the background color of the tooltip for a control available inside gridview on hover

css

c#

asp.net

jquery

gridview