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

Posted 2023-03-06

【中文标题】如何更改悬停时gridview内可用控件的工具提示的背景颜色

【英文标题】：How to change the background color of the tooltip for a control available inside gridview on hover

【发布时间】：2015-03-03 02:52:09

【问题描述】：

我在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，我在其中为 LinkBut​​ton 控件分配工具提示（这是默认的工具提示样式）。

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;
    

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

【问题讨论】：

如果我没记错的话，大多数（所有？）控件的工具提示实际上都呈现为 title 属性是不可能的，并且浏览器显示的“工具提示”显示此 title 属性的文本无法设置样式。如果你想要一个“类似工具提示”的功能，你需要用 javascript/CSS 来实现它

如果它是一个 javascript 工具提示，您将需要追踪它的资产。一些工具提示仅使用 javascript 进行样式设置，有些还具有 css 规则。在浏览器控制台中检查 DOM 以获取线索

@charlietfl ：这是控件的默认工具提示。我没有使用任何 javascript 来更改它。是否可以从后面的代码中更改工具提示？

如果它使用浏览器默认的标题工具提示，你不能设置样式

【参考方案1】：

是的，结合 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>

【参考方案2】：

您可以使用 JQuery 库。

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

【讨论】：

有很多工具提示不需要 jQueryUI 的开销并且更加灵活