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

Question

I have a linkbutton control inside gridview itemtemplate .

i want to customize the default tooltip view of that linkbutton control. How can i achieve this ? Here is my Grid and already it is binded data from another function.

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

And here is my DataBound where i am assigning the tooltip for the LinkButton control (which is the default tooltip style).

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

How can i identify the tooltip style and customize it. Please help!

Answer 1

Yes Combining Javascript and CSS i am able to achieve this.Code behind remains same as defined in the question.

Posting here - might be helpful for others.

ItemTemplate

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

Answer 2

You can use JQuery library.

Click on the view source link : http://jqueryui.com/tooltip/#custom-style