通过tooltip实现操作某元素后通过ajax获取内容进行悬浮框展示

前端代码：

//需要添加悬浮框的元素，我这里把所有class为"red_point"的a元素都加上了悬浮框展示逻辑
$("a.red_point").tooltip({
    //悬浮框相对元素的位置，有top、bottom、left、right可选
    position: 'right',
    content: function(){
        //要获取内容的信息的ID，这个是我本身的业务所需，不过既然是拿数据，应该都会有类似的参数
        var infoId= $(this).closest("tr[id^=infoId]").attr('id').replace("infoId_","");
        //默认展示空内容
        var recheckRemark = '';
        if(caseId) {
            $.ajax({
                url:'获取数据的url/getMessage',
                type:'POST',
                data:{infoId:infoId},
                dataType:'json',
                //这里必须使用同步，否则悬浮框已经开始展示，但是ajax还没拿回数据，导致展示的内容是空
                async:false,
                success:function(data) {
                    //获取后台返回的内容
                    recheckRemark = data;
                }
            });
        }
        //悬浮框需要展示的内容
        return recheckRemark;
    },
    //本例使用的是鼠标划入事件进行悬浮框展示，也可以换成click、dbclick等事件
    showEvent : "mouseover",
    //本例使用的是鼠标划入事件进行悬浮框隐藏，也可以换成click、dbclick等事件
    hideEvent : "mouseleave",
    onShow: function(){
        $(this).tooltip('tip').css({
            //悬浮框背景色
            backgroundColor: '#FFF',
            //悬浮框内容与边框的距离
            padding: '5px'
        });
    }
});

后端代码：

/**
 * 这是一个测试
 * @param infoId 信息ID
 * @return
 */
@RequestMapping("/getMessage")
@ResponseBody
public String getNewestRecheckRemark(Long infoId) {
    return "狮子熊";
}

效果展示：