HTML "옵션"태그에 도구 설명을 표시하려면 어떻게합니까?
일반 HTML 또는 jQuery 지원 JavaScript를 사용하는 <option>경우 의사 결정 프로세스를 지원하기 위해 개별 요소에 대한 툴팁을 어떻게 표시합니까 ( 다른 종류의 제어를위한 공간이 충분하지 않으며 약간의 도움이 필요합니다 ).
플러그인이나 이와 유사한 것을 통해이 작업을 수행 할 수 있습니까?
성공하지 못한 jQuery에 대한 몇 가지 툴팁 플러그인을 시도했습니다 (툴팁 포함).
이 솔루션은 다음과 같아야합니다.
- IE, WebKit 및 Gecko에서 작동합니다.
- 표준
<select>포장<option>요소를 활용 합니다.
따라서 솔루션이 다른 태그를 사용하려면 해당 요소를 동적으로 필요한 요소로 변환해야합니다 (초기 마크 업이 다를 것으로 예상하지 않음).
이에 대한 코드는 여기 에서 찾을 수 있습니다 . SafeSurf 섹션 아래에 있습니다. 여기서 선택 항목의 의미에 대한 옵션 롤오버에 대한 도움말을 표시하고 싶습니다. 현재로서는 "사후"에만 표시 될 수 있으며 사용자에게 도움이되는 몇 가지 사전 도움말이 있습니다.
이것이 쉽지 않으며 무언가를 만들어야 할 수도 있다는 점을 인식하십시오. 따라서 현상금은 가장 완벽한 솔루션이나 제가 만들 수있는 솔루션에 가장 가깝게 만드는 특정 후크에 수여됩니다.
이 질문을받은 후 2 년 동안 다른 브라우저가 따라 잡은 것 같습니다 (적어도 Windows에서는 ... 다른 브라우저에 대해서는 확실하지 않음). 옵션 태그에 "title"속성을 설정할 수 있습니다.
<option value="" title="Tooltip">Some option</option>
이것은 Windows 7의 Chrome 20, IE 9 (및 8 및 7 모드), Firefox 3.6, RockMelt 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>
방금 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으로 설정하여 옵션 인 척하는 스타일 상자 위에 배치합니다.
- 또는 순수한 자바 스크립트를 사용하고 일련의 상자를 사용하고 자바 스크립트 onclick 이벤트를 추가하여 드롭 박스를 직접 다시 만들 수 있으므로 자바 스크립트를 사용하여 클릭 한 상자로 숨겨진 값을 업데이트합니다.
- 또는 이미 나와있는 비표준 라이브러리 중 하나를 사용하십시오. (있는 경우?)
At least on firefox, you can set a "title" attribute on the option tag:
<option value="" title="Tooltip">Some option</option>
I don't think this would be possible to do across all browsers.
W3Schools reports that the option events exist in all browsers, but after setting up this test demo. I can only get it to work for Firefox (not Chrome or IE), I haven't tested it on other browsers.
Firefox also allows mouseenter and mouseleave but this is not reported on the w3schools page.
Update: Honestly, from looking at the example code you provided, I wouldn't even use a select box. I think it would look nicer with a slider. I've updated your demo. I had to make a few minor changes to your ratings object (adding a level number) and the safesurf tab. But I left pretty much everything else intact.
Why use a dropdown at all? The only way the user will see your explanatory text is by blindly hovering over one of the options.
I think it would be preferable to use a radio button group, and next to each item, put a tooltip icon indicating additional information, as well as displaying it after selection (like you currently have it).
I realize this doesn't exactly solve your problem, but I don't see the point in struggling with an html element that's notorious for its inflexibility when you could just use one that's better suited in the first place.
I don't believe that you can achieve this functionality with standard <select> element.
What i would suggest is to use such way.
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
The basic version of it won't take too much space and you can easily bind mouseover events to sub items to show a nice tooltip.
Hope this helps, Sinan.
참고URL : https://stackoverflow.com/questions/3249591/how-can-i-display-a-tooltip-on-an-html-option-tag
'Development Tip' 카테고리의 다른 글
| SpringSource Tool Suite (STS)가 왜 그렇게 느린가요? (0) | 2020.11.28 |
|---|---|
| JavaScript 개체 속성이 동일한 개체의 다른 속성을 참조 할 수 있습니까? (0) | 2020.11.28 |
| 의존성 주입이란? (0) | 2020.11.27 |
| dig를 사용하여 SPF 레코드 검색 (0) | 2020.11.27 |
| 멀티 스레딩 : 언제 조인을 사용합니까? (0) | 2020.11.27 |