2014-04-29 3 views
5

JQueryUI를 통해 툴팁 (기본값은 아님)을 표시하는 방법이 있습니까? 옵션 세트/드롭 다운의 개별 옵션이 표시됩니까? jquery UI 툴팁을 선택 옵션으로 표시

나는 샘플에서 발생하는 나는 그것을 표시하기 위해 선택한 옵션을 요구하고 있지 않다 Sample

비 작업의 제목을 가지고있다.

제 생각에는 브라우저에 따라 툴팁이 드롭 다운 목록 뒤에 표시 될 때가 있습니다. 이것은 일반적으로 Firefox 나 IE10에서 발생합니다.

JQueryUI 툴팁을 사용하지 않거나 사용하지 않습니다. 크롬은 기본 툴팁

다음

를 사용하면 JSFiddle보고 싶지 않은 경우 내 샘플 코드입니다 : 당신이 드롭 다운 메뉴의 바로 툴팁을 배치 할 수있는 옵션으로

$(function() { 
    $(document).tooltip({items:"select,option,.optionClass",position:{ my: "left top", at: "left bottom"} 
    }); 
}); 
+1

네이티브 셀렉트에서는 이것이 가능하지 않다고 생각합니다. jquery UI 1.11로 업그레이드 할 수 있다면 툴팁을 추가 할 수있는'selectmenu' 위젯을 소개합니다. –

답변

0

은? margin-left : 70px를 예제의 .ui-tooltip 클래스에 추가합니다. - 묻는 것이 아니라 해결할 수있는 방법입니다.

1

jQuery를 UI의 툴팁 툴팁이 실제로 불을 작동하려면 size 속성이 이벤트가 필요한 크기 속성이 선택 요소에 설정되어있는 경우에만 <select>

설정 할 경우에만 <option> 작동합니다. - source

여기에 내 자신이 문제를 능가하는 현재 드릴 수 없습니다 updated example

+0

크기 1을 제외한 모든 크기에서 작동합니다. – HoldOffHunger

0

,하지만 적어도 선택과 툴팁 위젯을 사용할 수있는 하나의 방법으로 올라와있다.

<div id="SelectFieldDiv">이 인 것을 상상해보십시오. 당신은 툴팁 스타일 가지고 <div id="SelectFieldDiv">를 얻을 마우스를 오버 텍스트 수 있습니다 : 당신은 설정하지 않는 한 가 아니, 당신은 선택의에와 툴팁을 사용할 수 없습니다

$(document).ready(function() { 
     $(document).tooltip(); 

     $('#SelectField').change(function(e) { 
       $('#SelectFieldDiv').prop('title', $('#SelectField').find(':selected').prop('title')); 
     }); 

     $('#SelectField').change(); 
}); 

불행하게도, 질문에 대한 답은 그렇지 않은 것으로 보인다 size 속성은 1보다 큽니다 (선택 항목이 거의 없습니다).

가장 최신 버전 인 jQuery v. 3.2.1; jQuery-UI v 1.12.1.

관련 문제