我正在使用asp.net vb.net，我有一个任务是在悬停时显示工具提示。然而，它在chrome和Internet Explorer上运行良好，但它不适用于火狐。我希望它适用于所有浏览器。请根据我的代码建议我，可能是我在做任何错误。代码如下。
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="paymentTrackerPage">
<div class="gridBox summary-gridBox-style" style="padding-top: 53px;">
<div class="gbheader">
<div class="gbheaderLeft">
<div class="gbheaderMiddle">
<DS:DSLabel ID="DSLabel1" runat="server" Text="Payment Tracker"></DS:DSLabel></div>
</div>
<div class="gbheaderRightCorner"></div>
</div>
<div style="position: relative;">
<div class="gbbody">
<div class="gbrightShadow">
<asp:GridView ID="GridView1" runat="server" CssClass="masterGrid" AutoGenerateColumns="False" AllowPaging="true"
PageSize="20">
<Columns>
<asp:BoundField DataField="DEAL_NUMBER" HeaderText="Deal No.">
<ItemStyle CssClass="gridRow" />
</asp:BoundField>
<asp:BoundField DataField="SELL_CURRENCY" HeaderText="Currency">
<ItemStyle CssClass="gridRow" />
</asp:BoundField>
<asp:BoundField DataField="AMOUNT" HeaderText="Amount">
<ItemStyle CssClass="gridRow alignRight" />
<HeaderStyle CssClass="alignRight amountCol"/>
</asp:BoundField>
<asp:TemplateField HeaderText="Payment Status">
<ItemTemplate>
<asp:Image ID="imgProcessOne" CssClass="progressImg one" runat="server" ImageUrl="~/images/inActiveFirst.png" onmouseover="getData(this);" onmouseout="hideData()" />
<asp:Image ID="imgProcessTwo" CssClass="progressImg two" runat="server" ImageUrl="~/images/inActiveMid.png" onmouseover="getData(this);" onmouseout="hideData()" />
<asp:Image ID="imgProcessThree" CssClass="progressImg three" runat="server" ImageUrl="~/images/inActiveMid.png" onmouseover="getData(this);" onmouseout="hideData()" />
<asp:Image ID="imgProcessFour" CssClass="progressImg four" runat="server" ImageUrl="~/images/inActiveLast.png" onmouseover="getData(this);" onmouseout="hideData()" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="PROCESS_ONE" HeaderText="" >
<ItemStyle CssClass="hiddencol" />
<HeaderStyle CssClass="hiddencol"/>
</asp:BoundField>
<asp:BoundField DataField="PROCESS_TWO" HeaderText="">
<ItemStyle CssClass="hiddencol" />
<HeaderStyle CssClass="hiddencol"/>
</asp:BoundField>
<asp:BoundField DataField="PROCESS_THREE" HeaderText="">
<ItemStyle CssClass="hiddencol" />
<HeaderStyle CssClass="hiddencol"/>
</asp:BoundField>
<asp:BoundField DataField="PROCESS_FOUR" HeaderText="">
<ItemStyle CssClass="hiddencol" />
<HeaderStyle CssClass="hiddencol"/>
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="tableHeader" />
</asp:GridView>
</div>
</div>
</div>
<div style="width: 100%; float: left; position: relative;">
<div class="gbfooter">
<div class="gbfooterMiddle">
</div>
</div>
<div class="gbfooterRightCorner"></div>
</div>
</div>
</div>
<script type="text/javascript">
function hideData() {
$DS('.toolTip').hide();
}
function getData(arg) {
//var event = document.createEvent('Event');
var process = arg.id;
var Value;
document.onmouseover = function (event) {
var evtSource;
if (document.all) {
evtSource = event.srcElement;
}
else {
evtSource = event.target;
}
//var event = event || window.event;
event = event || window.event;
}
//var clientX = event.clientX;
//var clientY = event.clientY;
var str;
var showTip = true;
if (process.indexOf('imgProcessOne') > 1) {
Value = arg.parentElement.nextSibling.textContent;
if (Value == "N") { showTip = false; }
}
if (process.indexOf('imgProcessTwo') > 1) {
Value = arg.parentElement.nextSibling.nextSibling.textContent;
if (Value == "N") { showTip = false; }
}
if (process.indexOf('imgProcessThree') > 1) {
Value = arg.parentElement.nextSibling.nextSibling.nextSibling.textContent;
if (Value == "N") { showTip = false; }
}
if (process.indexOf('imgProcessFour') > 1) {
Value = arg.parentElement.nextSibling.nextSibling.nextSibling.nextSibling.textContent;
if (Value == "N") { showTip = false; }
}
if (showTip == true) {
str = "<table class='paymentTrackerTooltip' style='background-image: url(../../../images/tooltip2.png);'><tr><td>" + Value + "</td></tr></table>";
$DS('.toolTip .content').html(str).css('background', 'transparent').css('border', 'none');
$DS('.toolTip').css('left', event.clientX - 40).css('top', event.clientY - 70).css('display', 'block');
// $DS('.toolTip').css('display', 'block');
//$DS('.toolTip .bg').css('height', Auto).css();
}
else { return false; }
}
Imports Datasoft.Framework.Utility
Imports System.Collections.Specialized
Imports Datasoft.Framework.WebContainers
Imports Datasoft.Framework.WebControls
Imports C1.Web.C1WebGrid
Imports System.IO
Imports Datasoft.Framework.WebUtilities
Partial Public Class PaymentTracker
Inherits DSCommonPage
Dim ws As New DSService.WS
Private Script As New StringBuilder
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Me.FormLoadComplete()
fillGrid()
End If
Me.HideMasterButtons()
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "showMasterButton", "$DS('.footerButtons').css('display','none');", True)
End Sub
Public Sub fillGrid()
Dim isPostValue As String = GetResourceValue("PTProcessOne")
Dim isPaidValue As String = GetResourceValue("PTProcessTwo")
Dim isSettledvalue As String = GetResourceValue("PTProcessThree")
Dim isFinishedValue As String = GetResourceValue("PTProcessFour")
Dim dateValue As String = ""
Dim EntName As String = ""
Dim str As String = ""
Dim ds As New DataSet
Dim extraparams As New DSParameters
Me._formParams.extraparams = DSUtilitiesWeb.Serialize(extraparams)
Me._formParams.WebMethod = WebMethod.GetPaymentTracker
ds = CType(CType(DSUtilitiesWeb.DeserializeResult(ws.GetDetail(Me.DSSerializedParams)), DSResult).Value, DataSet)
Dim dt As DataTable = ds.Tables(0)
dt.Columns.Add("PROCESS_ONE", GetType(String))
dt.Columns.Add("PROCESS_TWO", GetType(String))
dt.Columns.Add("PROCESS_THREE", GetType(String))
dt.Columns.Add("PROCESS_FOUR", GetType(String))
dt.Columns.Add("AMOUNT", GetType(String))
Try
For Each row As DataRow In dt.Rows
str = ""
row("AMOUNT") = DSUtilitiesWeb.FormatCurrency(row("SELL_ITEM_ID"), row("SELL_AMOUNT"), True)
If row("IS_POST") = True Then
If DSUtilities.GetSafeString(row("POST_ON")) <> "" Then
dateValue = DSUtilities.DateFromStringWithoutTimeInCurrentFormat(row("POST_ON"))
End If
EntName = DSUtilities.GetSafeString(row("ENTITY_NAME"))
str = isPostValue.Replace("{Date}", dateValue).Replace("{Entity}", EntName)
row("PROCESS_ONE") = str
Else
row("PROCESS_ONE") = "N"
End If
If row("IS_PAID") = True Then
If DSUtilities.GetSafeString(row("PAID_ON")) <> "" Then
dateValue = DSUtilities.DateFromStringWithoutTimeInCurrentFormat(row("PAID_ON"))
End If
EntName = DSUtilities.GetSafeString(row("ENTITY_NAME"))
str = isPaidValue.Replace("{Date}", dateValue).Replace("{Entity}", EntName)
row("PROCESS_TWO") = str
Else
row("PROCESS_TWO") = "N"
End If
If row("IS_SETTLED") = True Then
If DSUtilities.GetSafeString(row("SETTLED_ON")) <> "" Then
'dateValue = DSUtilities.GetSafeString(row("SETTLED_ON"))
dateValue = DSUtilities.DateFromStringWithoutTimeInCurrentFormat(row("SETTLED_ON"))
End If
EntName = DSUtilities.GetSafeString(row("ENTITY_NAME"))
str = isSettledvalue.Replace("{Date}", dateValue).Replace("{Entity}", EntName)
row("PROCESS_THREE") = str
Else
row("PROCESS_THREE") = "N"
End If
If row("IS_FINISHED") = True Then
'dateValue = DSUtilities.GetSafeString(row("SETTLED_ON"))
Dim dts As New Date
If DSUtilities.GetSafeString(row("SETTLED_ON")) <> "" Then
dts = DSUtilities.DateFromStringWithoutTime(row("SETTLED_ON"))
dateValue = DSUtilities.DateFromStringWithoutTimeInCurrentFormat(dts.AddDays(1).ToString())
Dim dtNow As Date = DSUtilities.DateFromStringWithoutTimeInCurrentFormat(Date.Now)
If dtNow >= dts.AddDays(1) Then
EntName = DSUtilities.GetSafeString(row("ENTITY_NAME"))
str = isFinishedValue.Replace("{Date}", dateValue).Replace("{Entity}", EntName)
row("PROCESS_FOUR") = str
Else
row("PROCESS_FOUR") = "N"
End If
Else
EntName = DSUtilities.GetSafeString(row("ENTITY_NAME"))
str = isFinishedValue.Replace("{Date}", dateValue).Replace("{Entity}", EntName)
row("PROCESS_FOUR") = str
End If
' dateValue = DSUtilities.GetSafeString(row("SETTLED_ON"))
Else
row("PROCESS_FOUR") = "N"
End If
Next
GridView1.DataSource = dt
GridView1.DataBind()
Catch e As Exception
Response.Write(e.Message)
End Try
End Sub
Private Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Or e.Row.RowType = ListItemType.AlternatingItem Then
Dim isPost As Boolean = False
Dim isPaid As Boolean = False
Dim isSettled As Boolean = False
Dim isFinished As Boolean = False
If e.Row.Cells(4).Text <> "N" Then
isPost = True
End If
If e.Row.Cells(5).Text <> "N" Then
isPaid = True
End If
If e.Row.Cells(6).Text <> "N" Then
isSettled = True
End If
If e.Row.Cells(7).Text <> "N" Then
isFinished = True
End If
'formating cells having dates
Dim pOne As Image = e.Row.FindControl("imgProcessOne")
Dim pTwo As Image = e.Row.FindControl("imgProcessTwo")
Dim pThree As Image = e.Row.FindControl("imgProcessThree")
Dim pFour As Image = e.Row.FindControl("imgProcessFour")
If isPost Then
pOne.ImageUrl = "~/images/activeFirst.png"
End If
If isPaid Then
pTwo.ImageUrl = "~/images/activeMid.png"
End If
If isSettled Then
pThree.ImageUrl = "~/images/activeMid.png"
End If
If isFinished Then
pFour.CssClass = "finalized"
pFour.ImageUrl = "~/images/activeLast.png"
End If
End If
End Sub
Protected Sub GridView1_SelectedIndexChanging(sender As Object, e As GridViewSelectEventArgs) Handles GridView1.SelectedIndexChanging
fillGrid()
GridView1.PageIndex = e.NewSelectedIndex
GridView1.DataBind()
End Sub
Protected Sub GridView1_PageIndexChanging(sender As Object, e As GridViewPageEventArgs) Handles GridView1.PageIndexChanging
fillGrid()
GridView1.PageIndex = e.NewPageIndex
GridView1.DataBind()
End Sub
End Class
code.css
.paymentTrackerGrid th {
width: 80px;
}
.paymentTrackerGrid td {
text-align: center;
}
.paymentTrackerGrid .gridHeader th.first {
display: block;
vertical-align: middle;
padding-top: 6px;
}
.paymentTrackerGrid .gridHeader th.last {
width: 305px;
}
.paymentTrackerGrid td {
height: 30px;
}
.progressBar span.progress {
width: 70px;
float: left;
height: 25px;
background-image: url("DatasoftERP_Web/images/all-backs.png");
background-position: 0px 0px;
background-repeat:repeat;
}
.paymentTrackerGrid .progressBar {
width: 285px;
display: table;
margin: 0 auto;
}
.progress img {
width: 100%;
height:100%;
}
.paymentTrackerGrid .progressBar span.progress.four {
margin-right: 0;
}
.ActiveLast {
height: 28px!important;
margin-top: -3px;
}
.paymentTrackerPage .masterGrid thead tr th {
width: auto !important;
padding: 0 !important;
text-align: center;
}
.paymentTrackerPage .gridHeader th:first-child {
display: block;
padding:5px 0px 0 0px !important;
}
td.gridRow {
text-align: center;
}
/* temp css*/
span.progress.one.tooltip:hover span {
display: inline;
position: absolute;
color: #ffffff;
background: #999999;
visibility: visible;
top: 40px;
padding: 9px 14px;
background-position: 0 0;
left: 296px;
border-radius: 3px;
}
span.progress.two.tooltip:hover span {
display: inline;
position: absolute;
color: #ffffff;
background: #999999;
visibility: visible;
top: 40px;
padding: 9px 14px;
background-position: 0 0;
left: 365px;
border-radius: 3px;
}
.paymentTrackerPage .masterGrid tr {
border-bottom: 1px solid #999;
}
span.progress.three.tooltip:hover span {
display: inline;
position: absolute;
color: #ffffff;
background: #999999;
visibility: visible;
top: 40px;
padding: 9px 14px;
background-position: 0 0;
left: 438px;
border-radius: 3px;
}
span.progress.four.tooltip:hover span {
display: inline;
position: absolute;
color: #ffffff;
background: #999999;
visibility: visible;
top: 40px;
padding:9px 14px;
background-position: 0 0;
left: 505px;
border-radius: 3px;
}
img#GridView1_ctl02_imgProcessOne:hover td.hiddencol.showtext1 {
visibility:visible;
}
.tooltip span {
visibility:hidden;
}
span.tooltiptail {
position: absolute;
top: 60px !important;
background: none !important;
}
.showtext {
position: absolute;
border-radius: 3px;
width: 220px;
padding: 20px 0 0 0 !important;
height: 170px;
color: #777777!important;
left: 280px;
margin-top: -25px;
border: none;
font-weight: bold;
text-shadow: none !important;
background-image: url(../../../images/tooltip1.png);
background-repeat: no-repeat;
background-position: 4px -19px;
z-index: 999999;
opacity: 0.11 !important;
}
.progressImg:hover .showtext {
visibility:visible !important;
}
.paymentTrackerPage .gridRow td {
padding: 8px 4px 2px 20px;
}
.paymentTrackerPage tr.altgridRow td{
padding: 8px 4px 2px 20px;
}
.paymentTrackerPage .masterGrid tfoot {
display: table-footer-group !important;
}
.paymentTrackerPage div.gbrightShadow {
padding: 10px 20px;
width: 722px;
}
.paymentTrackerPage .masterGrid tr td {
text-align: center;
padding: 7px 0 0;
border: none;
}
.paymentTrackerPage table#GridView1 {
width:730px;
margin: 10px auto 5px;
}
.paymentTrackerPage .summary-gridBox-style {
margin: 30px 0px 50px 30px;
width: 750px;
float: left;
z-index: 999;
}
.paymentTrackerTooltip td {
font-size: 11px !important;
padding: 3px 5px 0;
vertical-align: top;
}
.alignLeft {
text-align:left !important;
}
.alignRight {
text-align:right !important;
}
.paymentTrackerPage .masterGrid tbody tr:last-child a {
font-size: 13px;
font-weight: normal;
margin-right: 4px;
}
.paymentTrackerPage .masterGrid tr:last-child td span {
color: green;
font-weight: bold;
font-size: 13px;
text-decoration: underline;
margin-right: 4px;
}
.paymentTrackerPage .masterGrid tr:last-child {
border-bottom:none !important;
}
.paymentTrackerPage table.masterGrid th {
background-color: #71818F;
color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
/* border-right: 1px solid; */
padding-left: 10px;
padding-right: 10px;
font-weight: normal;
}
td.showtext {
margin-top: -71px;
}
.paymentTrackerPage .toolTip .content {
background: transparent !important;
border: none !important;
}
table.paymentTrackerTooltip {
width: 220px;
background-position: -6px -20px;
height: 72px;
background-repeat: no-repeat;
text-align: center;
padding-bottom: 13px;
}
.paymentTrackerPage th.alignRight.amountCol {
padding-right: 5px !important
}
td.gridRow.alignRight {
padding-right: 5px !important;
}
.progressImg {
width: 60px;
height: 20px;
}