悬停时如何更改网格视图中可用控件的工具提示的背景色

本文关键字：控件 工具提示 背景色 何更改 网格 视图 悬停 | 更新日期: 2023-09-27 18:36:20

我在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;
    }
}

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

悬停时如何更改网格视图中可用控件的工具提示的背景色

是的，

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

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

您可以使用 JQuery 库。

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

相关文章：