PHP 툴팁. HTML 툴팁 및 구현. 우리 후드 아래에는 무엇이 있나요?
저자로부터: 안녕하세요. 도구 설명은 요소(일반적으로 이미지) 위로 마우스를 가져갈 때 나타나는 작은 설명 텍스트입니다. 오늘은 다양한 방법으로 HTML에서 툴팁을 만드는 방법을 살펴보겠습니다.
표준 힌트기본적으로 title 속성은 설명 텍스트를 표시하는 역할을 합니다. 다양한 요소에 사용될 수 있지만 일반적으로 표시되는 내용을 설명하기 위해 그림에만 사용됩니다.
이전 기사 중 하나에서는 호랑이 이미지를 사용하여 사진 크기 작업을 보여주었습니다. 괜찮으시다면 이 이미지를 다시 사용하겠습니다. 따라서 힌트를 표시하려면 제목 속성을 추가하고 그 안에 원하는 텍스트를 작성하면 됩니다.
< img src = "tiger.jpg" title = "이것은 호랑이다" > |
하나의 단어가 있을 수도 있고 여러 개의 문장이 있을 수도 있습니다. 그리고 이것은 다음과 같습니다:
힌트는 호버링 직후가 아니라 일정 시간이 지나면 원활하게 나타납니다. 이것이 기본 동작입니다.
이러한 툴팁의 주요 문제점은 스타일을 지정할 수 없다는 것입니다. 이 문제를 해결하는 방법? 다른 방법으로 힌트를 주어야합니다. 이제 몇 가지를 보여 드리겠습니다.
순수 CSS 방법이미지에 대한 힌트를 아름답게 표시할 수 있는 매우 흥미로운 방법입니다. HTML 마크업은 간단합니다. 이미지만 블록 컨테이너에 넣어야 하며 나중에 스타일에서 참조할 수 있도록 식별자를 할당할 것입니다.
< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div > |
여기서 명확하지 않을 수 있는 유일한 것은 data-name 속성입니다. 문제는 이것이 자체적으로는 아무 것도 하지 않는 소위 데이터 속성이지만 그 값은 CSS와 자바스크립트에서 사용될 수 있어 어떤 경우에는 유용하다는 것입니다. 이것을 다음에 보게 될 것입니다.
먼저 컨테이너의 스타일을 설명하겠습니다. 전체 페이지가 아닌 상위 블록을 기준으로 위치 지정이 발생하도록 설명 텍스트가 있는 블록의 위치를 절대적으로 지정하므로 상대 위치 지정이 필요합니다.
#tiger( 위치: 상대; 표시: 인라인 블록; )
#호랑이( 위치: 상대; 디스플레이: 인라인 - 블록; |
블록선 표시는 블록(그리고 우리가 생성할 도구 설명이 포함된 블록)이 창의 전체 너비에 걸쳐 늘어나는 것을 방지합니다. 남은 것은 힌트 자체를 만드는 것뿐입니다. CSS에서는 의사 요소를 사용하여 이를 수행하는 것이 매우 편리합니다. 이와 같이:
#tiger:hover:after ( 내용: attr(데이터 이름); 위치: 절대; 왼쪽: 0; 아래쪽: 0; 배경: rgba(5,13,156,.55); 색상: #fff; 텍스트 정렬: 가운데 ; 글꼴 계열: 필기체; 글꼴 크기: 14px; 패딩: 3px 0; 너비: 100%; )
#호랑이:호버:후( 내용: attr(데이터 - 이름); 위치: 절대; 왼쪽: 0; 하단: 0; 배경: rgba(5, 13, 156, . 55); 색상 : #fff; 텍스트 - 정렬: 가운데 ; 글꼴 계열: 필기체; 글꼴 크기: 14px; 패딩: 3px 0; 너비: 100%; |
코드는 많지만 여기에는 복잡한 것이 없습니다. #tiger:hover:after 선택기는 다음을 의미합니다. 이미지가 있는 블록 위로 마우스를 가져가면 after 의사 요소를 생성해야 합니다(그런 다음 규칙은 중괄호 안에 나열됩니다). content: attr(data-name) 속성은 블록의 텍스트 값을 설정합니다. 이는 이미지 래퍼 블록의 data-name 속성에 작성된 것과 동일합니다.
이 툴팁은 이미지 위에 마우스를 올렸을 때 나타나는데, 일반 툴팁과 달리 갑자기 나타나며, 마우스를 올려놓은 순간 나타나는 모습 자체가 바로 나타납니다. 이 경우 의사 요소에는 부드러운 전환이 지원되지 않으므로 부드러운 전환을 구현할 수 없습니다.
방법 2. 순수한 CSS와 부드러운 외관그러나 코드를 꽤 많이 다시 작성하면 자바스크립트를 사용하지 않고도 툴팁의 매끄러운 모양을 얻을 수 있습니다.
다음에 보여줄 2가지 효과를 직접 확인하려면 메모장이나 편리한 코드 편집기를 열고 모든 작업을 반복하는 것이 좋습니다. 사실, 스타일 파일을 포함해야 하지만 스타일은 태그에 html로 작성할 수도 있습니다.
따라서 이 예제의 코드는 약간 다를 것입니다. 이는 의사 요소를 사용하지 않기 때문입니다. 이 때문에 원활한 변경이 불가능했습니다. 이번에는 코드가 다음과 같습니다.
수마트라호랑이
< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >수마트라호랑이< / div > < / div > |
CSS 코드는 크게 변경되지 않았습니다.
#tiger2( 위치: 상대; 디스플레이: 인라인 블록; ) #tiger2 .text ( 전환: 모두 0.6s; 불투명도: 0; 위치: 절대; 왼쪽: 0; 아래쪽: 0; 배경: rgba(5,13,156,. 55); 색상: #fff; 텍스트 정렬: 중앙; 글꼴 계열: 필기체; 글꼴 크기: 14px; 패딩: 3px 0; 너비: 100%; 변환: scale(0); ) #tiger2:hover .text (불투명도: 1; )
#호랑이2( 위치: 상대; 디스플레이: 인라인 - 블록; #tiger2.텍스트( 전환: 모두 0.6초; 변환:크기(0); #tiger2:hover.text( 불투명도: 1; |
컨텐츠 속성은 의사 요소에서만 지원되므로 제거합니다. 부드러운 상태 전환을 생성하는 전환 속성을 추가합니다. 불투명도: 0은 툴팁 블록에 완전한 투명성을 제공하므로 페이지에 표시되지 않습니다.
이제 블록 위로 마우스를 가져가면 툴팁을 사용하여 블록에 일반 투명도를 반환하는 것만으로도 충분합니다. 준비가 된. 요소가 원활하게 나타나는 것을 확인할 수 있습니다.
CSS3를 사용하면 다른 방법으로 요소를 숨길 수 있습니다. 예를 들어 변환을 사용합니다. 전체 투명도를 다음 속성으로 바꾸세요: 변환: scale(0) 블록 크기가 0으로 줄어들므로 화면에 표시되지 않습니다. 그림이 있는 블록 위로 마우스를 가져가면 다음과 같이 일반 크기가 반환되어야 합니다: 변환: 스케일(1). 이 경우 외관 효과가 더욱 아름답게 보입니다. 이것을 직접 볼 수 있습니다.
보시다시피 CSS에서는 툴팁이 아름다운 효과와 함께 천천히 나타날 수도 있습니다.
다른 방법jQuery는 더 많은 가능성을 제공할 수 있습니다. 이 라이브러리를 사용하면 힌트를 표시하는 코드를 직접 작성하거나 이미 이를 구현한 플러그인을 찾을 수 있습니다.
예를 들어 Bootstrap 프레임워크에는 이미 만들어진 구성 요소가 많이 있으며 그 중 하나가 도구 설명입니다. 동일한 힌트를 생성하고 사용할 수 있는 코드 예제에 대한 프레임워크에 대한 설명서를 찾아볼 수 있습니다. 부트스트랩 전체를 연결할 필요는 없으며 일반적으로 툴팁과 같은 구성요소만 남겨두고 그 부분만 다운로드하여 연결하면 됩니다.
일반적으로 오늘 저는 CSS를 사용하여 날카롭고 부드러운 모양의 아름다운 도구 설명을 만드는 방법을 보여 주었습니다. 게다가 부트스트랩과 jQuery도 사용할 수 있습니다. 무엇이든 선택하고 사이트에 흥미롭고 아름다운 팁을 구현하세요!
오늘은 CSS를 사용하여 툴팁을 만들어 보겠습니다. 도구 설명은 마우스를 위에 올리면 표시되는 내용입니다. 예를 들어 제목 속성에 설명이 포함되어 있는 경우 링크가 표시됩니다.
툴팁은 링크와 이미지 모두에 사용할 수 있습니다.
원시 형태의 툴팁은 다음과 같습니다.
툴팁은 title 속성을 사용하는 표준 시스템 방식으로 표시됩니다.
장식 없이 툴팁이 포함된 표준 링크 코드:
링크
툴팁 CSSCSS를 사용하여 도구 설명의 스타일을 지정할 수 있습니다. 세 가지 옵션을 살펴보겠습니다. CSS의 툴팁.
불행하게도 제목 디자인에 대한 CSS "레시피"가 없으므로 추가 속성을 추가하고 해당 디자인을 지정하고 이를 아름다운 제목 디자인을 만들고 싶은 링크/이미지 코드에 추가해야 합니다. 툴팁 CSS.
첫 번째 예에서는 다음을 수행합니다. 툴팁 CSS맨 아래 이미지 위에.
이를 위해 이미지라는 두 가지 속성을 사용하고, 툴팁이 작동하려면 ::after 및 data-text를 사용하여 툴팁 텍스트를 표시합니다.
이 예의 CSS 스타일은 다음과 같습니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .image ( 디스플레이 : 인라인 블록 ; 위치 : 상대 ; ) .image : hover :: after ( content : attr (data-text) ; /* 툴팁 텍스트 표시 */ position : 절대 ; 왼쪽 : 0 ; 오른쪽 : 0 ; 하단 : 0px ; /* 툴팁 위치 */ z-index : 1 ; /* 다른 요소 위에 툴팁 표시 */ background : rgba (0 , 255 , 102 , 0.6 ) ; /* 색상(RGB) 및 투명도 */ color : #fff ; /* 텍스트 색상 */ text-align : center ; /* 텍스트를 가운데에 정렬 */font-family : Arial, sans-serif ; /* 글꼴 모음 */font- size : 11px ; / * 도구 설명 텍스트 크기 */ padding : 5px 10px ; /* 여백 */ border : 1px solid #333 ; /* 테두리 옵션 */ ) |
이미지 ( 디스플레이: 인라인 블록; 위치: 상대; ) .image:hover::after ( content: attr(data-text); /* 도구 설명 텍스트 표시 */ position: 절대; 왼쪽: 0; 오른쪽: 0; Bottom: 0px; /* 툴팁 위치 */ z-index: 1; /* 다른 요소 위에 툴팁 표시 */ background: rgba(0,255,102,0.6); /* 색상(RGB) 및 투명도 */ color: # fff; /* 텍스트 색상 */ text-align: center; /* 텍스트를 가운데에 정렬 */font-family: Arial, sans-serif; /* 글꼴 계열 */font-size: 11px; / * 도구 설명 텍스트 크기 * / padding: 5px 10px; /* 여백 */ border: 1px solid #333; /* 테두리 옵션 */ )
| 1 | 
|
결과:
이 디자인은 링크에는 작동하지 않으므로 링크에 대해 약간 다른 옵션을 사용하겠습니다.
첫 번째 옵션은 링크 위에 도구 설명을 표시합니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .podskazka( 디스플레이: 인라인 ; 위치: 상대 ; ) .podskazka: hover: after ( 배경: #333 ; 배경: rgba (204 , 102 , 0 , .8) ; 테두리 반경: 5px ; 하단: 26px ; 색상: #fff ; 내용: attr(제목) ; 왼쪽: 20% ; 패딩: 5px 15px ; 위치: 절대 ; z-색인: 98 ; 너비: 자동 ; ) .podskazka: hover: 앞 ( /* 하단에 화살표 추가 툴팁 블록 */ 테두리: 단색 ; 테두리 색상: #cc6600 투명 ; 테두리 너비: 6px 6px 0 6px ; 하단: 20px ; 내용: "" ; 왼쪽: 50% ; 위치: 절대 ; z-index: 99 ; ) |
Podskazka( 디스플레이: 인라인; 위치: 상대;).podskazka:hover:after( 배경: #333; 배경: rgba(204,102,0,.8); 테두리 반경: 5px; 하단: 26px; 색상: #fff; content: attr(제목); 왼쪽: 20%; 패딩: 5px 15px; 위치: 절대; z-index: 98; 너비: 자동;).podskazka:hover:before( /* 툴팁 하단에 화살표를 추가합니다. 블록 */ 테두리: 단색; 테두리 색상: #cc6600 투명; 테두리 너비: 6px 6px 0 6px; 하단: 20px; 내용: ""; 왼쪽: 50%; 위치: 절대; z-색인: 99;)
링크
마지막 옵션은 링크 아래에 툴팁을 표시하는 것입니다. 이 옵션은 이전 옵션과 유사하며 아래에는 툴팁만 표시됩니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .tooltip ( position :relative ; /* 요소를 도구 설명의 상위 요소로 만들기 */cursor: help ; ) .tooltipspan(position:absolute; /* 흐름에서 요소 제거 */ margin-left : -30000px ; / * 그리고 화면 가장자리 뒤로 멀리 숨깁니다 */ background-color : rgba (0 , 0 , 153 , .8) ; /* 팝업 블록 배경 */ color : #fafafa ; /* 텍스트 색상 */ padding : 10px ; /* 패딩 */ -webkit -border-radius: 5px ; /* 둥근 모서리 */ -moz-border-radius: 5px ; -khtml-border-radius: 5px ; border-radius : 5px ; ) . tooltip : hoverspan ( /* 호버에서 */ margin-left : 0 ; /* 화면에서 멀리 떨어진 가장자리에서 해당 위치로 블록을 반환합니다 */ width : 250px ; /* 너비 설정 */ z-index : 1000 ; /* 맨 위에 배치 */ top : 30px ; /* 상단 여백 */ left : 20px ; /* 왼쪽 패딩 */ ) .tooltipspan: after ( content : "" ; /* 추가된 콘텐츠 */ width : 0 ; /* 숨겨서 0으로 설정 */ height : 0 ; border-bottom : 10px solid #000099 ; /* 아래쪽 테두리를 사용하여 삼각형의 색상과 높이를 설정합니다. */ border-right : 30px solid transparent ; /* 오른쪽 - 오른쪽 삼각형의 너비 */ position : 절대 ; /* 상위 블록을 기준으로 한 위치 */ top : -10px ; 왼쪽: 10px; ) |
Tooltip( position:relative; /* 요소를 도구 설명의 상위 요소로 만들기 */cursor:help;).tooltipspan(position:absolute; /* 흐름에서 요소 제거 */ margin-left: -30000px; /* 그리고 화면 가장자리 뒤로 멀리 숨깁니다 */ background-color: rgba(0,0,153,.8); /* 팝업 블록 배경 */ color: #fafafa; /* 텍스트 색상 */ padding:10px; / * 패딩 */ -webkit-border- radius: 5px; /* 모서리 둥글게 하기 */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;).tooltip:hoverspan ( /* 마우스 오버 시 */ margin-left : 0; /* 화면에서 멀리 떨어진 가장자리의 블록을 원래 위치로 되돌립니다. */ width: 250px; /* 너비 설정 */ z-index: 1000; /* 배치 맨 위에 위치 */ /* 상위 블록을 기준으로 위치 지정 */ top:30px ; /* 상단 패딩 */ left:20px; /* 왼쪽 패딩 */ ).tooltipspan:after( content: ""; /* 콘텐츠 추가 */ width:0; /* 숨겨서 0으로 설정 */ height :0; border-bottom: 10px solid #000099; /* 아래쪽 테두리를 사용하여 삼각형의 색상과 높이를 설정 * / 테두리 오른쪽: 30px 솔리드 투명; /* 오른쪽 - 오른쪽 삼각형의 너비 */ position: 절대; /* 상위 블록을 기준으로 한 위치 */ top:-10px; 왼쪽:10px;)
또는 어떤 HTML 요소에 툴팁이 있을 수 있는지
이 장에는 하이퍼텍스트 마크업 영역의 도구 설명 예가 포함되어 있습니다.
왼쪽 메뉴에는 현대적이고 매우 상세한 HTML 튜토리얼이 있습니다.
이를 통해 처음부터 웹사이트를 만들 수 있지만 지금은 조금 더 낮은 수준을 살펴보세요.
이번 장에서는 다음을 살펴보겠습니다.
HTML 힌트를 진행하기 전에 해당 정보를 읽어 보시기 바랍니다.
이것은 흥미로울 것입니다.
초기 인터넷의 주요 동향
1997년 최초의 브라우저 출현 이후 일부 소비자는 인터넷의 다양한 영역은 물론 정보 기술 및 컴퓨터 하드웨어 지원 분야에서도 적극적으로 전문화되어 왔습니다. 많은 사용자가 웹 디자이너가 되어 개인 및 기업 웹 사이트를 만들기 시작하고 로컬 컴퓨터 네트워크 구축에 참여합니다. 이런 식으로 그들은 스스로 교육합니다. 이 상태는 오늘날까지 살아 남았습니다. 오늘날 월드 와이드 웹(World Wide Web)을 통해 지식을 얻는 것은 매우 세련되고 편리합니다. 오늘날, 특히 지난 세기 90년대 중반, 이전 사회주의 국가에는 프로그래밍 전문가가 필요했습니다. 수요가 있으면 공급이 있을 것입니다. 프로그래머는 집단 교육을 받습니다. 일부는 대학에서, 일부는 집에서 컴퓨터 화면 앞에서 교육을 받습니다. 요즘 같은 시대에는 젊은이와 비전문가가 자신의 경험과 아이디어를 교환하는 프로그래밍 포럼이 큰 인기를 얻고 있습니다.
HTML 링크 도움말여기에서는 모든 것이 거의 동일합니다. title="" 속성이 정의합니다. HTML 툴팁 .
이미지의 alt=""는 이미지가 표시되지 않을 경우 페이지에 표시될 대체 텍스트를 지정합니다.
HTML 도구 설명과 대체 텍스트는 완전히 다르기 때문에 혼동하지 마십시오.
텍스트에 대한 HTML 도구 설명HTML 도구 설명은 페이지의 거의 모든 요소에 적용됩니다.
다르게 말하면, 위의 예에서 우리에게 익숙한 title="" 은 모든 수준의 제목 태그, 단락 태그, 블록, 이미지 및 와 같은 선형 요소를 가질 수 있습니다. 다른 사람.
나는 첫 번째 수준 제목 태그와 링크에 title="" 속성을 배치한 경험이 있습니다.
개인적으로 저는 웹 사이트 텍스트의 검색 엔진 최적화에 대한 불가피한 아마추어 실험의 일환으로 자연스럽게 도구 설명을 사용합니다. 내 실험이 얼마나 성공적이었는지 판단할 생각은 없습니다. 솔직히 이러한 최적화의 결과는 추적하기 어렵지만, 키워드나 문구로 무리하게 사용하기는 매우 쉽습니다. 따라서 항상 검색 엔진에 의해 처벌을 받을 위험이 있으므로 조심하고 프로모션에 과용하지 마십시오.
잠재적으로 복잡할 수 있는 사용자 인터페이스 요소에 대한 추가 정보를 제공하는 것은 사용자 친화적이고 접근 가능한 웹 사이트를 개발하는 웹 디자이너의 업무에서 매우 중요한 부분입니다.
페이지에 표시되는 것 이상의 추가 정보를 표시하기 위해 일반적으로 사용되는 메커니즘 중 하나는 도구 설명(화면의 특정 요소에 대한 힌트를 표시하기 위한 디자인 요소)입니다.
CSS와 JavaScript를 사용하는 혁신적인 솔루션이 많이 있지만(jQuery와 같은 JavaScript 프레임워크를 사용하거나 사용하지 않고) 때로는 새로운 기술이 오랜 기술을 어떻게 변화시키고 있는지 살펴보는 것이 유용할 수 있습니다.
이 튜토리얼에서는 CSS만 사용하여 놀라운 크로스 브라우저 툴팁을 만드는 방법을 보여줍니다.
 |
 |
약어나 두문자어를 설명하거나, 단어의 의미를 설명하거나, 무언가에 대한 추가 정보를 제공해야 할 때마다 도구 설명은 간단하면서도 효과적인 솔루션입니다.
이미지와 같은 요소 위에 표시되고 title 속성(또는 불행하게도 Internet Explorer를 사용하는 경우 alt 속성)의 내용을 표시하는 작은 노란색 텍스트 블록부터 툴팁을 사용하는 스크립트 기반의 정교한 솔루션까지, 툴팁은 환상적인 도구입니다. 디자인 커뮤니티에서는 인기가 거의 없는 것 같습니다.
대부분의 브라우저에는 툴팁에 대한 기본 스타일이 있지만 보기에는 좋지 않습니다.
새로운 기술로 빠르게 발전하는 표준이 새로운 브라우저에서 더 좋아지고 더 잘 지원되기 시작하는 동안 CSS의 등장으로 우리는 새로운 수준의 툴팁(위와 같은 지루한 브라우저 기본값을 대체하는 역할)을 만들 수 있습니다. 디테일과 디자인.
이전에 jQuery 기반 솔루션을 사용해 본 적이 있다면 JavaScript가 CSS가 할 수 없는 많은 작업(예: 도구 설명이 사라지도록 지연)을 수행할 수 있다는 점을 확실히 알 수 있을 것입니다. 그러나 강조 표시 및 스타일링은 CSS를 사용하여 수행할 수 있으며 이는 디자인을 개선하고 툴팁을 뛰어넘는 다른 훌륭한 디자인에 영감을 줍니다.
이 튜토리얼에서는 순수한 CSS를 사용하여 툴팁을 만들 것입니다.
즉, CSS3를 지원하지 않는 브라우저(예: Internet Explorer 8 이하)에서는 작동하며 최신 브라우저에서처럼 보기에는 좋지 않습니다.
색상, 글꼴, 이미지 및 도구 설명 프레임과 같은 효과의 모양은 최종 사용자의 컴퓨터에서 사용되는 항목(브라우저, 설치된 글꼴 또는 모니터 대비)에 따라 달라집니다.
CSS3 확장border-radius 및 box-shadow 속성과 같은 간단하지만 효과적인 확장을 사용하면 간단한 풍선 메시지 사각형에 새롭고 예쁜 모양을 줄 수 있습니다.
우리 후드 아래에는 무엇이 있습니까?예제의 HTML 코드부터 시작하겠습니다.
다양한 유형의 툴팁여러분의 프로젝트에 대한 충분한 아이디어를 제공하기 위해 다섯 가지 유형의 툴팁을 만들어 보겠습니다.
디스플레이 출력을 표준화하기 위해 각각은 다른 것과 매우 유사해 보입니다. 그러나 나중에 실험하여 자세히 연구하고 모양을 변경할 수 있습니다.
이 메커니즘은 모든 브라우저에서 작동하지만 필요한 경우 원하는 대로 변경할 수 있습니다.
기본 마크업아래 코드에서는 일반 요소와 함께 XHTML 1.0 일반 템플릿을 사용합니다.
CSS를 사용하여 요소를 작성하므로 학습 목적으로 CSS가 .
원하는 경우 효과와 기능을 향상시키기 위해 jQuery 또는 JavaScript 코드를 추가할 수도 있습니다!
HTML 마크업 툴팁 CSS로 만든 툴팁 예시!텍스트 위에 마우스를 올리면 클래식 힌트, 중요한 메시지를 볼 수 있습니다. 
Critical Post이것은 CSS를 사용하여 툴팁을 만드는 방법의 예일 뿐입니다!, 도움말 
도움말이것은 CSS를 사용하여 툴팁을 만드는 방법의 예일 뿐입니다!, 정보 
정보이것은 CSS를 사용하여 툴팁을 만드는 방법의 예일 뿐입니다! 그리고 경고 
경고: 이것은 CSS를 사용하여 툴팁을 만드는 방법의 예일 뿐입니다!.
이것은 CSS를 사용하여 툴팁을 만드는 방법의 예일 뿐입니다!
코드는 요소(특별히 관련된 것은 없음)와 단락(
) 링크 요소가 포함된 텍스트의 경우 ("tooltip" 클래스가 설정됨)
툴팁에 태그가 사용되는 이유는 무엇입니까? ?abbr , dfn 또는span 대신 a 태그를 사용하는 이유는 IE6이 a 이외의 요소에 대해:hover 의사 선택기를 제대로 지원하지 않기 때문입니다.
IE6을 지원하지 않으려면 다른 태그를 사용할 수 있습니다.
예제의 각 범위 요소는 클래식 클래스(일반 도구 설명의 경우) 또는 사용자 정의(사용 중인 색 구성표와 일치하는 중요한 , 도움말 , 정보 또는 경고 포함)로 설정됩니다.
이러한 스타일링 사용에는 em 요소(툴팁의 제목 설정)와 이미지(툴팁에서 아이콘으로 사용되며 자신의 이미지를 사용할 수 있음) 형태의 몇 가지 보너스도 있습니다.
CSS페이지에 대한 HTML 코드를 작성했으며 이제 도구 설명이 제대로 작동하도록 할 차례입니다.
페이지 섹션에 추가되는 아래 코드는 도구 설명이 포함된 각 링크를 점선 밑줄이 있는 멋진 작은 스타일로 설정하고(실선 밑줄이 있는 일반 링크와 구별하기 위해) 커서를 설정합니다. 물음표로 표시합니다(시각적 차별화를 위한 용도이기도 함).
또한 밑줄을 제거하고 색상을 설정합니다(그래서 요소는 일반 링크처럼 보이지 않습니다).
코드의 두 번째 부분은 필요할 때까지 도구 설명을 숨깁니다.
모든 것이 매우 간단합니다!
class.tooltip .tooltip에 대한 CSS 스타일( border-bottom: 1px dotted #000000; 색상: #000000; 개요: 없음; 커서: 도움말; 텍스트 장식: 없음; 위치: 상대; ) .tooltip 범위( 여백-왼쪽: -999em; 위치: 절대; )도구 설명 내용은 일부 화면 판독기가 이러한 속성을 무시하기 때문에 display: none 또는 visible: hiden 대신 음수 margin-left 속성을 사용하여 보기에서 제거됩니다.
툴팁의 CSS 스타일우리는 곧 툴팁이 다양한 브라우저에서 동일한 방식으로 작동하도록 만들 예정입니다. 이제 CSS 코드 몇 줄을 추가해 보겠습니다.
다음 코드를 추가하면 도구 설명이 평범해 보이고 나머지 텍스트와 시각적으로 구분하기 어려울지라도 화면에 도구 설명이 표시됩니다.
도구 설명을 표시하기 위한 CSS .tooltip:hover 범위( 글꼴 계열: Calibri, Tahoma, Geneva, sans-serif; 위치: 절대; 왼쪽: 1em; 위쪽: 2em; z-색인: 99; 여백 왼쪽: 0; 너비: 250px; ) .tooltip:hover img ( 테두리: 0; 여백: -10px 0 0 -55px; float: 왼쪽; 위치: 절대; ) .tooltip:hover em ( 글꼴 계열: Candara, Tahoma, Geneva, sans- serif ; 글꼴 크기: 1.2em; 글꼴 두께: 굵게; 디스플레이: 블록; 패딩: 0.2em 0 0.6em 0; ) .classic( 패딩: 0.8em 1em; ) .custom( 패딩: 0.5em 0.8em 0.8em 2em ; ) * html a:hover ( 배경: 투명; ) 줄 필요 * html위 코드의 마지막 줄이 왜 포함되어 있는지 궁금할 것입니다. 링크 배경의 투명도를 설정합니다. 툴팁을 테스트하는 동안 IE6에서 링크 배경이 존재하는 한 제거할 수 없는 이상한 효과를 발견했습니다!
위의 코드는 툴팁의 기능을 보장합니다. 화면에 표시되지만 일반 텍스트와 분리하기가 상당히 어렵습니다. 페이지에서 도구 설명 텍스트를 눈에 띄게 만드는 색 구성표가 없습니다.
툴팁의 색 구성표 설정/다음 코드는 다섯 가지 도구 설명 스타일 각각에 대한 색 구성표를 설정합니다.
페이지 코드를 변경하고 브라우저에서 업데이트한 후, 모든 브라우저에서 거의 동일하게 링크 위로 마우스를 가져가면 툴팁이 나타납니다.
색상 구성표에 대한 CSS 코드 .classic( background: #FFFFAA; border: 1px solid #FFAD33; ) .tical( background: #FFCCAA; border: 1px solid #FF3334; ) .help( background: #9FDAEE; border: 1px solid # 2BB0D7; ) .info ( 배경: #9FDAEE; 테두리: 1px 단색 #2BB0D7; ) .warning ( 배경: #FFFFAA; 테두리: 1px 단색 #FFAD33; )CSS 코드는 매우 간단하지만 툴팁을 멋지게 보여주고 어디서나 해당 작업을 수행합니다. 색 구성표는 귀하의 재량에 따라 변경될 수 있습니다.
고급 툴팁 표시를 위한 CSS3 몇 번의 터치이 튜토리얼을 마치기 전에 CSS3 코드 몇 줄을 추가하여 툴팁에 시각 효과를 추가하겠습니다. border-radius 속성을 사용하여 둥근 모서리를 설정하고 box-shadow 속성을 사용하여 치수를 추가해 보겠습니다.
이러한 속성은 전 세계적으로 지원되지 않으므로 일부 최신 브라우저 버전에서만 작동합니다. 하지만 작업하는 곳에서는 툴팁이 매끄럽고 섹시해 보일 것입니다!
selector.tooltip:hover 범위에 아래 코드를 추가하고 페이지를 새로고침해 보겠습니다.
테두리, 그림자 및 투명도에 대한 시각 효과는 도구 설명을 페이지 텍스트 위로 올려 정보를 대조하고 읽기 쉽게 만듭니다.
공식 CSS3 속성뿐만 아니라 Mozilla 및 WebKit의 확장도 사용된다는 것을 알 수 있습니다.
새로운 브라우저를 위한 추가 CSS 속성 border-radius: 5px 5px; -moz-국경-반경: 5px; -웹킷-국경-반경: 5px; 상자 그림자: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
이 튜토리얼에서는 인터페이스 개선에 많은 노력이 필요하지 않음을 보여줍니다. 또한 웹 애플리케이션의 새로운 수준의 상호 작용을 설정하는 데 유용할 수 있는 CSS 사용 경험을 검토해 볼 가치가 있습니다.
레이아웃 전문가는 이 게시물에서 스스로 새로운 것을 발견할 가능성이 없습니다. 이 게시물은 저처럼 범용 툴팁을 생성하고 스타일링하는 데 문제가 있는 초보 레이아웃 디자이너를 위한 것입니다.
최근에 작은 블로그를 만들다가 스타일리시하면서도 간단한 툴팁을 작성해야 하는 작업에 직면했습니다. 툴팁을 위한 별도의 div 컨테이너를 생성하거나 순수 CSS로 툴팁을 생성하는 다양한 방법을 시도한 후 코드를 복잡하게 만들지 않고 브라우저 간 호환되며 동시에 구현이 매우 간단한 범용 솔루션을 찾았습니다.
이 간단한 문제를 해결하는 방법에 관심이 있는 사람은 고양이 아래에 문의하세요.
툴팁 링크
목록에서 이미 알 수 있듯이 저는 LESS CSS 전처리기를 사용하고 있습니다.
CSS 스타일과 스크립트를 별도의 파일에 포함했습니다. 또한 하나의 링크와 툴팁의 컨테이너가 될 div 블록도 있습니다.
HTML5 사양에서는 요소나 블록에 대한 일부 정보를 저장할 수 있는 데이터 속성 유형의 사용자 정의 속성을 사용할 수 있습니다. 툴팁의 텍스트를 저장하는 것은 데이터 속성에 있습니다.
링크
저장을 위해 data-tooltip 속성을 사용합니다.
HTML로 끝났습니다. 스타일로 넘어갈 수 있습니다. CSS 저는 LESS Elements 라이브러리를 사용하고 있으며 모든 사람에게 권장하므로 이 프레임워크를 사용하여 몇 가지 속성을 작성하겠습니다.
@import "css/elements.less"; #tooltip ( z-색인: 9999; 위치: 절대; 디스플레이: 없음; 상단:0px; 왼쪽:0px; 배경색: #000; 패딩: 5px 10px 5px 10px; 색상: 흰색; .opacity(0.5); . 반올림(5px); )
목록을 보면 LE를 연결하는 첫 번째 줄에서 div#tooltip 블록을 절대 위치 지정으로 설정하고 숨기는 것이 분명합니다. 다음으로 블록에 배경색과 텍스트 색상을 지정하고 모서리를 둥글게 하고(5px) 투명도 값을 50%로 설정합니다.jQuery 이제 재미있는 부분인 jQuery가 나옵니다.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// 준비가 끝났습니다.
이제 data-tooltip 속성이 있는 모든 요소를 선택 항목에 추가하고 원하는 요소 위로 마우스를 가져가면 도구 설명 값을 가져와 변수에 저장합니다. 다음으로 #tooltip 블록에 힌트 텍스트를 추가하고 페이지 가장자리 + 5px의 커서 좌표를 지정하고 마지막으로 올바른 위치에 툴팁이 포함된 블록을 표시합니다. 마우스가 요소를 떠난 후 #tooltip 블록을 숨기고 내용을 지우고 0;0;으로 되돌립니다.
그게 다야!
결과적으로 우리는 다음과 같은 것을 얻게 될 것입니다: 데모
이 간단한 스크립트 덕분에 data-tooltip 속성이 있는 페이지의 모든 요소는 도구 설명을 받게 됩니다.
관심을 가져주셔서 감사합니다!
