동적으로 div 요소에 툴팁 텍스트 설정

Question

컨테이너 (div)에 동적으로 툴팁 텍스트를 설정하고 각 div 요소 (elem.Alias-Status)에 대해 jQuery를 사용하여 정렬 된리스트에 추가하는 중입니다.

function addNewElement(elem) { 

    var li = $("<li></li>"); 

    li.prop("class", "ui-state-default"); 
    li.prop("id", elem.Alias); 
    li.text(elem.Name); 

    var newItem = '<div id="' + elem.Alias + '-Status" class="elementStatus" tooltipText="' + elem.IP + '"><div class="image"><img id="' + elem.Alias + '-StatusImg" src="@Url.Content("~/images/ongoing.gif")"></div><div id="' + elem.Alias + '-StatusTxt" class="text">Waiting...</div></div>'; 
    //$('#' + elem.Alias + '-Status').prop('tooltipText', elem. IP); 

    li.append(newItem); 

    li.appendTo($("#OuterDivContainer"));  
}; 

그러나 분명히 작동하지 않습니다. 런타임에 마우스를 각각 마우스로 가리키면 툴팁이 표시되지 않습니다. 그리고 ... 나는 이것을 어떻게하는지 모른다. 아이템이 생성되는 동시에이 함수 내에서 생성해야합니다.

위의 함수는 모든 항목 (요소)을 반복하는 다른 함수에서 호출됩니다. 그런 다음이 함수는 addNewElement 함수에 매개 변수 elem을 전달합니다.

아이디어가 있으십니까?

나는 JQuery와 - UI 1.10.3 및 JQuery와 1.10.2

Answer 1

는 API (http://api.jqueryui.com/tooltip/#option-content)에 따르면 사용하고, 상황에서이 작업을 수행 할 수있는 방법은 컨테이너를 추가 한 후 툴팁을 초기화하는 것입니다. 물론

$('#' + elem.Alias + '-Status').tooltip({ content: elem.IP }); 

, 당신은 또한 다음과 같이 초기화 후 툴팁의 내용을 변경할 수 :

$('#' + elem.Alias + '-Status').tooltip("option", "content", "New Content"); 

나는 당신이 시도 접근을 포함하여, 많은 다른 접근 방식을 최근에이 투쟁을했고 발견 귀하의 경우 어떤 도구 설명이 아직 초기화되지 않았기 때문에 작동하지 않습니다. 그러나 이것은 올바른 방법이며 나를 위해 일했습니다. 나를 위해

Answer 2

작품 :

$(yourElement).prop('title', 'yourText');