Use Div + CSS to create a customizable tooltip style in the gridview template Column

In projects, we often encounter the need to view the details of all fields in the data table. Generally, we will display some necessary fields such as ID, then, other fields are summarized in the detailview or another page, and a linkbutton for "View Details" is provided, or another Web window is displayed using a script. These practices are a little poor. If we only View Details for "View Details", we still have a better solution, use Div + CSS to achieve effects similar to tooltip.

 

As we all know, Some HTML elements or ASP. NET controls have a property called tooltip. This attribute displays some prompts and descriptions when you move the mouse over. Unfortunately, it cannot embed HTML code like the innerhtml attribute. For example:

<Asp: Image id = "image1" imageurl = "~ /Images/more.gif "tooltip =" <B> earthquake relief zhongzhi Chengcheng </B> "runat =" server "/>
<Asp: Label id = "label2" runat = "server" text = "<B> earthquake relief zhongzhi Chengcheng </B>"> </ASP: Label>

Running Effect

We didn't achieve our expected results. Well, below we use Div + CSS to achieve our desired results in the gridview template.

First, add a data source control.

<Asp: sqldatasource
Id = "sqlperformance1"
Runat = "server"
Connectionstring = "<% $ connectionstrings: mysqlconnectionstring %>"
Providername = "system. Data. sqlclient"
Selectcommand = "select * from [authors]">
</ASP: sqldatasource>

The Web. config configuration is as follows:

<Connectionstrings>

<Add name = "mysqlconnectionstring" connectionstring = "Data Source =." sqlexpress; attachdbfilename = | datadirectory | pubs. MDF; Integrated Security = true "/>

</Connectionstrings>

Add another gridview

 

<Asp: gridview id = "gridview1" runat = "server" autogeneratecolumns = "false" datakeynames = "au_id"

Datasourceid = "sqldatasource1" allowpaging = "true">

<Columns>

<Asp: boundfield datafield = "au_id" headertext = "au_id" readonly = "true" sortexpression = "au_id"/>

<Asp: boundfield datafield = "au_lname" headertext = "au_lname" sortexpression = "au_lname"/>

<Asp: templatefield headertext = "au_fname" sortexpression = "au_fname">

<Itemtemplate>

<% -- Code to be added -- %>

</Itemtemplate>

</ASP: templatefield>

</Columns>

</ASP: gridview>

 

The authors table in the pubs database has many fields. We only display the first three fields in the gridview. Then, we will focus on the au_fname template column.

We want to achieve this: each row of au_fname is followed by a small image. When you move the mouse up, The tooltip is displayed, which contains the details we want.

First, we need a total Div container.

<Itemtemplate>

<Div>

</Div>

</Itemtemplate>

Then bind the field to be displayed:

<Itemtemplate>

<Div>

<Asp: Label id = "label1" runat = "server" text = '<% # BIND ("au_fname") %>'> </ASP: Label>

</Div>

</Itemtemplate>

 

Next, we add a DIV, which is very important and indispensable. It mainly coordinates the label1 layout (display: inline) and sets the position of the tooltip (position: to prevent the tooltip from "running" on the page ".

<Itemtemplate>
<Div>
<Asp: Label id = "label1" runat = "server" text = '<% # BIND ("au_fname") %>'> </ASP: Label>
<Div style = "display: inline; position: relative; Z-index: 1000">

<Div id = "Div <% # eval (" au_id ") %>" class = "tooltip">
<Strong> phone </strong>: <% # eval ("phone") %> <br/>
<Strong> address </strong>: <% # eval ("Address") %> <br/>
<Strong> city </strong>: <% # eval ("city") %> <br/>
<Strong> state </strong>: <% # eval ("state") %> <br/>
<Strong> zip </strong>: <% # eval ("Zip") %> <br/>
<Strong> contract </strong>: <asp: checkbox id = "checkbox1" Checked = '<% # convert. toboolean (eval ("contract "). tostring () %> 'runat = "server"/>
</Div>
</Div>
</Div>
</Itemtemplate>

The DIV whose ID is Div <% # eval ("au_id") %> is a tooltip-like container. It can be customized, that is, it can be quite complex, you can add any HTML code you want.

Edit the template column to align it:

Next, we need to use CSS code to control this Div so that its status is hidden at the initial time. When the onmousemove event of the IMG object occurs, it is displayed and the onmouseout event is hidden.

The following are CSS code and JavaScript scripts, both of which are simple.

<Style type = "text/CSS">

. Tooltip

{

Display: none;

Position: absolute;

Z-index: 1001;

Left: 10px;

Top: 15px;

Width: 170px;

Font-family: trebuchet MS, lucida sans Unicode, Arial, sans-serif;

Font-size: 0.8em;

Padding: 3px;

Border: dotted 1px;

Background-color: infobackground

}

</Style>

 

<SCRIPT type = "text/JavaScript">

Function showpanel (divname ){

VaR CTL = specified parameter Doc ument. getelementbyid (divname );

CTL. style. Display = 'block ';

CTL. scrollintoview ();

}

Function hidepanel (divname ){

VaR CT2 = registry.doc ument. getelementbyid (divname );

Ct2.style. Display = 'none ';

}

</SCRIPT>

 

Now, the task is finished. Let's take a look at the actual effect.

Here is a problem:

This is rather ugly. please familiarize yourself with CSS. Thank you!

Download source code: smarttooltip.zip