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>

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

在鼠标悬停在会话上时我想显示实时座位剩余号码，所以我正在对发送api请求并获得实时座位剩余号码的功能进行ajax调用。

我正在尝试使用以下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);
});

以上代码更新＆＃34; titletext＆＃34;标记字段但不会更改＆＃34;标题＆＃34;领域。

任何帮助将不胜感激。

Answer 1

我已经通过使用qtip解决了这个问题。每次用户使用“会话时间”徘徊在div上时＃39; class，我进行ajax调用以生成工具提示文本（根据会话时间来自服务器）。

这是我的输出：

这是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>

Answer 2

如果你看一下这篇文章，看看同样的答案是否适用于你的情况 JQUERY Change Title not working with tooltip

在鼠标悬停在会话时间按钮上更改工具提示内容

2 个答案: