如何更改悬停时gridview内可用控件的工具提示的背景颜色 [英] How to change the background color of the tooltip for a control available inside gridview on hover

问题描述

在 gridview itemtemplate 中有一个 linkbutton 控件。

我想自定义的默认工具提示 view linkbutton 这里是我的Grid，它已经是来自另一个函数的绑定数据。

 < asp：GridView ID = GridReportsrunat =server
 OnRowDataBound =GridReports_RowDataBound
 DataKeyNames =SubmitIDShowFooter =true
 AutoGenerateColumns =false> 
 
< asp：TemplateField> 
< HeaderTemplate>部门负责人< / HeaderTemplate> 
< HeaderStyle CssClass =HeaderStyleWidth100/> 
< ItemTemplate> 
< asp：HiddenField ID =LabelDepartmentLead
 Value ='<％＃DataBinder.Eval（Container.DataItem，DepartmentLead）％>'
 runat =server /> 
< asp：LinkBut​​ton ID =LinkBut​​tonViewText =View
 Font-Underline =falseFont-Bold =trueForeColor =Blue
 runat =server >< / ASP：LinkBut​​ton的> 
< / ItemTemplate> 
< ItemStyle Horizo​​ntalAlign =CenterCssClass =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）; 
 LinkBut​​ton LinkBut​​tonView = 
（LinkBut​​ton）e.Row.FindControl（LinkBut​​tonView）; 
 if（LabelDepartmentLead.Value == string.Empty）
 {
 LabelDepartmentLead.Value =No Department Leads; 
} 
 LinkBut​​tonView.ToolTip = LabelDepartmentLead.Value; 
} 
} 
  

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

解决方案

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

发布此处 - 可能对其他人有帮助。

ItemTemplate

 < ItemTemplate> 
< asp：HiddenField ID =LabelDepartmentLead
 Value ='<％＃DataBinder.Eval（Container.DataItem，DepartmentLead）％>'
 runat =server /> 
  Font-Bold =trueForeColor =Bluerunat =server
 onmouseover =showTooltip（this）ToolTip =Test
 onmouseout =hideTooltip（this）>< / asp：LinkBut​​ton> 
< / 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 =; 
} 
 
函数hideTooltip（控件）{
 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

 <风格> 
 .tooltipCss 
 {
 position：absolute; 
 border：1px纯灰色; 
保证金：1em; 
 padding：3px; 
背景：＃A4D162; 
 font-family：Trebuchet MS; 
 font-weight：normal; 
颜色：黑色; 
 font-size：11px; 
} 
< / style> 
  

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!

解决方案

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>

这篇关于如何更改悬停时gridview内可用控件的工具提示的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！