HTML "옵션" 태그에 툴팁을 표시하려면 어떻게 해야 합니까?
일반 HTML 또는 jQuery assisted JavaScript를 사용하는 경우 개별적으로 툴팁을 표시하는 방법<option>의사결정 과정에 도움이 되는 요소(다른 종류의 제어를 위한 공간이 충분하지 않으며 일부 도움이 필요합니다).
이것은 플러그인이나 유사한 것을 통해서도 가능합니까?
jQuery용으로 몇 가지 툴팁 플러그인을 시도해 보았지만 성공하지 못했습니다(Tooltip이라는 플러그인 포함).
이 솔루션은 다음과 같습니다.
- IE, WebKit 및 Gecko에서의 작업
- 표준 활용
<select>포장된<option>요소들.
따라서 솔루션이 다른 태그를 사용하려는 경우에는 해당 요소를 동적으로 필요한 것으로 변환해야 합니다(초기 마크업이 다를 것으로 예상하지 않음).
이에 대한 코드는 여기에서 찾을 수 있습니다. 이 코드는 SafeSurf 섹션 아래에 있으며, 옵션 롤오버에 대한 도움말을 표시하고자 합니다.현재는 "사후"에만 표시할 수 있으며 사용자를 위한 초기 도움말이 도움이 될 것입니다.
이것은 쉽지 않고 무언가를 만들어야 할 것이라는 점에 감사드립니다. 따라서 현상금은 가장 완벽한 솔루션 또는 제가 만들 수 있는 솔루션에 가장 근접하게 해주는 특정 후크에 수여될 것입니다.
이 질문을 받은 지 2년 만에 다른 브라우저들이 따라잡은 것 같습니다. (적어도 윈도우에서는...)다른 사람들에 대해서는 잘 모릅니다).옵션 태그에서 "title" 속성을 설정할 수 있습니다.
<option value="" title="Tooltip">Some option</option>
이것은 모두 윈도우 7에서 Chrome 20, IE 9 (및 그 8 & 7 모드), Firefox 3.6, Rock Melt 16 (Chromium 기반)에서 작동했습니다.
보이는 옵션의 수를 늘릴 수 있는 경우 다음이 도움이 될 수 있습니다.
<html>
<head>
<title>Select Option Tooltip Test</title>
<script>
function showIETooltip(e){
if(!e){var e = window.event;}
var obj = e.srcElement;
var objHeight = obj.offsetHeight;
var optionCount = obj.options.length;
var eX = e.offsetX;
var eY = e.offsetY;
//vertical position within select will roughly give the moused over option...
var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount));
var tooltip = document.getElementById('dvDiv');
tooltip.innerHTML = obj.options[hoverOptionIndex].title;
mouseX=e.pageX?e.pageX:e.clientX;
mouseY=e.pageY?e.pageY:e.clientY;
tooltip.style.left=mouseX+10;
tooltip.style.top=mouseY;
tooltip.style.display = 'block';
var frm = document.getElementById("frm");
frm.style.left = tooltip.style.left;
frm.style.top = tooltip.style.top;
frm.style.height = tooltip.offsetHeight;
frm.style.width = tooltip.offsetWidth;
frm.style.display = "block";
}
function hideIETooltip(e){
var tooltip = document.getElementById('dvDiv');
var iFrm = document.getElementById('frm');
tooltip.innerHTML = '';
tooltip.style.display = 'none';
iFrm.style.display = 'none';
}
</script>
</head>
<body>
<select onmousemove="showIETooltip();" onmouseout="hideIETooltip();" size="10">
<option title="Option #1" value="1">Option #1</option>
<option title="Option #2" value="2">Option #2</option>
<option title="Option #3" value="3">Option #3</option>
<option title="Option #4" value="4">Option #4</option>
<option title="Option #5" value="5">Option #5</option>
<option title="Option #6" value="6">Option #6</option>
<option title="Option #7" value="7">Option #7</option>
<option title="Option #8" value="8">Option #8</option>
<option title="Option #9" value="9">Option #9</option>
<option title="Option #10" value="10">Option #10</option>
</select>
<div id="dvDiv" style="display:none;position:absolute;padding:1px;border:1px solid #333333;;background-color:#fffedf;font-size:smaller;z-index:999;"></div>
<iframe id="frm" style="display:none;position:absolute;z-index:998"></iframe>
</body>
</html>
적어도 파이어폭스에서는 옵션 태그에 "타이틀" 속성을 설정할 수 있습니다.
<option value="" title="Tooltip">Some option</option>
Chrome에서 해봤어요.
var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});
하지만 호버엔트는 절대 발사되지 않습니다...따라서 표준 선택을 사용하여 이 작업을 전혀 수행할 수 없습니다.비표준적인 방법을 통해 이를 달성할 수 있습니다.
- 드롭다운처럼 보이는 라디오 상자를 사용하여 선택 상자를 위조할 수 있습니다.예를 들어 옵션인 것처럼 가장하는 스타일의 상자 위에 라디오 상자를 절대 위치시키고 불투명도를 0으로 설정합니다.
- 또는 순수한 자바스크립트를 사용하여 일련의 박스를 가지고 클릭 이벤트에서 자바스크립트를 추가하여 드롭박스를 직접 재생성할 수 있습니다. 따라서 자바스크립트를 사용하여 클릭한 박스를 사용하여 숨겨진 값을 업데이트합니다.
- 아니면 이미 나와 있는 비표준 라이브러리 중 하나를 사용할 수도 있습니다. (있는 경우?)
이것이 모든 브라우저에서 가능할 것 같지는 않습니다.
W3Schools는 이 테스트 데모를 설정한 후 모든 브라우저에 옵션 이벤트가 존재한다고 보고합니다.파이어폭스(Chrome 또는 IE가 아닌)에서만 작동할 수 있으며 다른 브라우저에서 테스트하지 않았습니다.
파이어폭스는 마우스 입력과 마우스 휴가도 허용하지만 w3schools 페이지에는 보고되지 않습니다.
업데이트: 솔직히 말씀하신 예시 코드를 보니 선택란도 사용하지 않을 것 같습니다.슬라이더가 더 어울릴 것 같아요.데모 업데이트 했습니다.등급 객체(레벨 번호 추가)와 안전 표면 탭을 약간 변경해야 했습니다.하지만 다른 건 거의 다 그대로 뒀어요
왜 드롭다운을 사용하는 겁니까?사용자가 설명 텍스트를 볼 수 있는 유일한 방법은 옵션 중 하나를 맹목적으로 맴도는 것입니다.
라디오 버튼 그룹을 사용하는 것이 좋을 것 같고, 각 항목 옆에 추가 정보를 나타내는 툴팁 아이콘을 넣고, 선택 후에 표시(현재 가지고 있는 것처럼)하는 것이 좋을 것 같습니다.
이것이 문제를 정확하게 해결하지는 못한다는 것을 알고 있지만, 처음부터 더 적합한 것을 사용할 수 있는데 융통성이 없다는 것으로 악명 높은 html 요소와 씨름하는 것은 의미가 없다고 생각합니다.
Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ, Δ<select>요소.
제가 제안하고 싶은 것은 그런 방법을 사용하는 것입니다.
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
기본 버전은 공간이 많이 들지 않고 쉽게 바인딩할 수 있습니다.mouseover멋진 도구 설명을 보여주기 위해 하위 항목에 이벤트를 표시합니다.
도움이 되길 바래, 신안.
언급URL : https://stackoverflow.com/questions/3249591/how-can-i-display-a-tooltip-on-an-html-option-tag
'programing' 카테고리의 다른 글
| 일치조건시열값변경 (0) | 2023.09.16 |
|---|---|
| WC_Product_에서 사용자 지정 메타데이터 사용Woocommerce 3에 대한 쿼리 (0) | 2023.09.16 |
| MariaDB Console로 백업할 수 없음 (0) | 2023.09.16 |
| Alert 대화상자의 테마를 변경하는 방법 (0) | 2023.09.16 |
| Oracle은 커서로 즉시 실행 (0) | 2023.09.16 |