javascript - 更改将鼠标悬停在 session 时间按钮上的工具提示内容

Question

我的 ASP.Net 网页生成带有以下代码的按钮

 <a id="1173766" val="248506" titletext="<b>Click to book online for ABC Cinemas</b><strong>$10 tickets </strong>: Preview Screening<br /><br />Seats Available: 35<br />Screening in Cinema 1" target="_self" href="https://localhost:6969/VenueTicketing/Start.aspx?sessionId=248506&amp;cinemaId=cbcc0921bb8e233ab9626690" class="tooltip" title="<b>Click to book online for ABC Cinemas</b><strong>$10 tickets </strong>: Preview Screening<br /><br />Seats Available: 35<br />Screening in Cinema 1">11:30am</a>

当我将鼠标悬停在 session 上时，我会看到有关 session 的基本信息，例如屏幕名称和剩余席位。 Please see screenshot attached

将鼠标悬停在 session 上时，我想显示实时剩余座位数，因此我对一个函数进行 ajax 调用，该函数发送 api 请求并获取实时剩余座位数。

我正在尝试使用以下 java 脚本代码更新渲染页面上的剩余座位数。

<script type="text/javascript">
$(document).ready(function () {
    function handler(ev) {
        var target = $(ev.target);
        var sessionid = target.attr('id');
        var sessionPOSid = target.attr('val');
        var TooolTipText = target.attr('titletext');

        target.attr('title', TooolTipText);

        if (sessionPOSid == "done")
        {

        }
        else
        {
            if (target.is(".tooltip")) {
                $.ajax({
                    type: "POST",
                    url: '../WebService/Home_SessionTimes.asmx/GetSeatsRemaining',
                    data: "{sessionId: '" + sessionid + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        //alert(msg.d);
                        var n = TooolTipText.indexOf("Seats Available: ");
                        var t = TooolTipText.substr(n + 17, 3);

                        if (t.indexOf("<") >= 0) {
                            if (t.indexOf("<") == 2) {
                                t = t.replace("<", "");
                            }
                            else {
                                t = t.Substring(0, 1);
                            }
                        }

                        TooolTipText = TooolTipText.replace(t, msg.d);

                        $('#' + sessionid).attr('title', TooolTipText);
                        $('#' + sessionid).attr('titletext', TooolTipText);
                        //$('#' + sessionid).attr('val', "done");
                        target.attr('title', TooolTipText);

                        target.tooltiptext = TooolTipText;
                    },
                });
            }
        }    
    }

    $(".tooltip").mouseover(handler);
});

上面的代码更新了标签的“titletext”字段，但没有更改“title”字段上的任何内容。

如有任何帮助，我们将不胜感激。

Answer 1

我已经通过使用 qtip 解决了这个问题。每次用户将鼠标悬停在带有“sessiontimes”类的 div 上时，我都会进行 ajax 调用来生成工具提示文本(来自基于 session 时间的服务器)。

这是我现在的输出:

这是 jQuery 代码。您需要从他们的网站导入 qtip css 和脚本文件。

<script type="text/javascript">
$(document).ready(function () {
    $('.sessiontimes').qtip({
        style: { classes: 'qtip-bootstrap' },
        content: {
            text: function (event, api) {
                $.ajax({
                    url: '../SessionToolTip.aspx',
                    data: 'sid=' + $(this).children("a").attr("id"),
                    dataType: "text",
                })
  .then(function (content) {
      api.set('content.text', content);
  }, function (xhr, status, error) {
      api.set('content.text', status + ':' + error);
  });
                return 'Loading...';
            }
        }
    });
});
</script>