1

私は同様の問題を見てきましたが、私が達成しようとしていることを網羅しているようには見えません。

基本的に、誰かがリンクの上にカーソルを置いたときに ajax 呼び出しを使用してツール ヒント テキストを取得したいだけです。すべてのピースを接続しましたが、onBeforeShow イベントから ajax 呼び出しを呼び出すと、ajax 呼び出しが完了する前にツールチップが返されます。preDelay オプションを変更してみましたが、ロード前に遅延が発生しますが、遅延後まで onBeforeShow イベントは発生しません (したがって、同じ効果があります)。基本的には、ajax 呼び出しが完了するまでツールチップが表示されるのを待つだけです。

クラスvarにajax値を貼り付けるように修正しました。したがって、最初の呼び出しの後の呼び出しで、前の呼び出しからの戻り値で更新されることがわかります。

以下は、コードの縮小版です (実行する必要があります)。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication11.WebForm1" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    [WebMethod]
    public static List<string> GetDescription(string inputId)
    {
        List<string> status = new List<string>();
        //going to do more here to get real data
        status.Add("New Updated Content");
        return status;
    }

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #tooltipmedium
        {
            display: none;
            position: absolute;
            background-color: gray;
            height: 310px;
            padding: 40px 30px 10px 60px;
            margin-top: -40px;
            margin-left: -80px;
            width: 616px;
            font-size: 11px;
            color: #fff;
            z-index: 99999 !important;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js "></script>
     <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

    <script type="text/javascript">
        var description;
        $(document).ready(function () {

            $("a[id*=linkButton]").tooltip({
                offset: [330, 40],
                position: "center right",
                predelay: 500,
                onBeforeShow: tooltipBeforeShow

            });


            function tooltipBeforeShow() {
                getDescription();

                this.getTip().html(description);
            }
            function getDescription() {
                $.ajax({
                    type: "POST",
                    url: "WebForm1.aspx/GetDescription",
                    data: "{inputId:'111'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus + ":" + errorThrown);
                    },
                    success: function (data) {
                        description = data.d[0];

                    }


                });

            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinkButton ID="linkButton" runat="server" Text='Hover Over This' Style="text-decoration: none;
            color: #000000;"></asp:LinkButton>
        <div id="tooltipmedium">
            Blah.. Old Text
        </div>
        <br />
    </div>
    </form>
</body>
</html>
4

1 に答える 1

0

要素に.mouseover（）イベントを使用してajaxを呼び出してから、success関数で.tooltip（）を接続するのはどうですか？マウスはすでに要素上にあるため、.tooltip（）。show（）を呼び出す必要があります。これにより、通常はツールチップが表示されます。

于 2012-09-10T22:26:05.840 に答える