캔버스 내의 Fabric JS 이미지에 텍스트 상자 팝업 (Jquery 툴팁 또는 유사)을 추가하는 방법은 무엇입니까?

Question

저는 Fabric JS 프로젝트를 사용하여 바닥을 방의 위치와 매핑합니다.
각 객실 위치에 아이콘을 추가했습니다. 마우스 위로 아이콘을 가리킬 때마다 텍스트 상자 팝업 (예 : jquery 툴팁)을 표시하려고합니다.
텍스트 상자 내가 this google group post를 찾았지만 아무도 정말 this link

Answer 1

1 단계 공유 옆에있는 솔루션을 설명하지 객실 정보 (전화 번호 \ 사람 \ 크기 \ 등) 를 표시해야합니다 : 설정하여 전문가

에게 2 단계 : 대화 상자로드

3 단계 : 경계 사각형이 페이지에있는 곳을 찾아 대화 상자를 이동합니다.

canvas.observe('mouse:over', function (e) { 
    console.log("Everyday I'm hovering"); 
    showImageTools(e.target); 
}); 
canvas.observe('mouse:out', function (e) { 
    $('#imageDialog').remove(); 
}); 
function showImageTools (e) { 
    var url = 'dialog/imageDialog.htm'; 
    $.get(url, function(data) { 
    // Don't add it twice 
    if (!$('#imageDialog').length) { 
     $(body).append(data); 
    } 
    moveImageTools(); 
}); 

function moveImageTools() { 
    var w = $('#imageDialog').width(); 
    var h = $('#imageDialog').height(); 
    var e = canvas.getActiveObject(); 
    var coords = getObjPosition(e); 
    // -1 because we want to be inside the selection body 
    var top = coords.bottom - h - 1; 
    var left = coords.right - w - 1; 
    $('#imageDialog').show(); 
    $('#imageDialog').css({top: top, left: left}); 
} 
function getObjPosition (e) { 
    // Get dimensions of object 
    var rect = e.getBoundingRect(); 
    // We have the bounding box for rect... Now to get the canvas position 
    var offset = canvas.calcOffset(); 
    // Do the math - offset is from $(body) 
    var bottom = offset._offset.top + rect.top + rect.height; 
    var right = offset._offset.left + rect.left + rect.width; 
    var left = offset._offset.left + rect.left; 
    var top = offset._offset.top + rect.top; 
    return {left: left, top: top, right: right, bottom: bottom}; 
} 

시작하기에 충분합니다. 이 중 어떤 것이 합리적이지 않은지 알려주십시오.