상위 요소의 "title"속성이 브라우저 플라이 오버를 유발하지 못하도록합니다.

Question

요소에 대한 빈 "title"속성이 "여기에 제목 비행을 표시하는 것을 괴롭히지 않도록"좋은 브라우저가 모두 작동합니다. 그것은 의미가 있습니다. 아무 것도없는 작은 흰색 비행 (편집 — 또는 공백 문자 제외)은 대부분의 사람들에게 완전히 쓸모가 없습니다.

IE 설계자는 동의하지 않습니다.

내 문제는 내가 "이게 뭐지?" 메커니즘을의 물음표 그래픽이 포함 된 절대적 위치에 포함시킵니다. 그 <div>에는 "title"속성이 있습니다. "History Eraser Button '의 기능은 무엇입니까? 물음표를 클릭하면 작은 "도움말"거품이 튀어 나와 주제에 관해 읽을 수 있습니다. "제목"의 개념은 사용자가 물음표 위로 마우스를 가져 가면 궁금한 질문을 보게됩니다.

"제목"과 관련된 문제는 풍선 도움말이 절대적으로 배치 된 <div> 안에 있으므로 페이지에 올바르게 위치한다는 것입니다. 즉, 절대적으로 위치한 <div>은 단지 "position : absolute"를 갖지만 오프셋 계산없이 "right"장소의 페이지에 드롭 될 수 있습니다. 따라서 "도움말"풍선은 자동으로 올바른 위치에 배치됩니다. 하지만 : 부모가 <div>에있는 "제목"은 이후에 풍선이 열려 있기 때문에 브라우저가 팝업하므로 입니다. 왜? "assist"풍선은 바깥 쪽 <div>에 어휘 적으로 포함되어 있기 때문에, 바깥 쪽 <div>은 물음표가있는 작은 물체 일지라도 말입니다.

는 따라서 솔루션 # 1이 아무것도 (내가 그 잘못을 가지고 — 편집으로, "도움말"풍선 <div>의 자신의 "제목"속성을 제공하는 것이었다, 그것은 제목에 아무것도하지 없습니다, 그건 공백 문자). IE에서는 예외입니다. IE에서는 빈 "title"속성을 사용하여 브라우저가 약간의 빈 사각형을 갖게됩니다. 도움이됩니다.

풍선이 보이고있는 동안 부모와 떨어져서 "title"속성을 부정 할 수는 있지만 IE의 부모 요소 "title"을 "오버라이드"하는 방법에 대해 궁금합니다. 마크 업과 함께 할 수 있습니다. 그것이 가능하지 않다면, 오 잘.

간단한 데모 페이지 : http://gutfullofbeer.net/title.html (작은 빈 흰색 상자를 볼 IE 7 또는 8로 그것을 시도)

편집 —헥타르, 하, 하 - 내 코드를 변경할 때 명시 적으로 널 알아되도록 " title "속성을 사용하면 IE는"null "이라는 단어가있는 비행을 보여줍니다 :-)

Answer 1

나는 그것이 부모 요소와 숨겨 놨다의 체인을 실행되도록 /는 "도움"거품을 열거 나 닫습니다 기존 코드를 보강 결국 jQuery "data"기능을 가진 "title"코드. 버블이 닫히면 제목이 복원됩니다.

Answer 2

나는 당신이 원하는 것을 할 수 있다고 생각하지 않습니다. 그것은 어쨌든 해킹처럼 보입니다 - 자식 DOM 요소 속성은 부모 속성을 "오버라이드 (override)"하지 않습니다.

http://jsbin.com/ezipe

Answer 3

왜 물음표 요소 (#qmark)에 제목을 할당하지 않고 포함하는 사업부 : 당신은 아마 이와 같은 올바른 제목에 특정 텍스트를 포장해야합니까? 그래서 대신 :

<div title="this is the overlapping title"> 
    <div id="qmark">?</div> 
    <div id="hiddenContainer"></div> 
</div> 

이 될 것

<div> 
    <div id="qmark" title="this title no longer overlaps">?</div> 
    <div id="hiddenContainer"></div> 
</div>