장치 오류 

질문에 마우스를 올리면 HTML 도구 설명이 표시됩니다. CSS3에서 간단한 툴팁을 만드는 방법

저자로부터:안녕하세요. 도구 설명은 요소(일반적으로 이미지) 위로 마우스를 가져갈 때 나타나는 작은 설명 텍스트입니다. 오늘은 다양한 방법으로 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; 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로 작성할 수도 있습니다.



이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 툴팁 유형

도구 설명의 위치는 커서 위치에 따라 달라지지 않으며 이미지 위에 커서를 놓으면 같은 위치에 나타납니다. 도구 설명이 사진 하단에 표시되도록 할 수 있으므로 도구 설명이 그림의 대부분을 덮지 않습니다. 스타일이 약간 변경됩니다(예 3).

예시 3. 사진 하단에 툴팁 표시

HTML5 CSS3 IE Cr Op Sa Fx

CSS의 도구 설명



이 예의 결과는 그림 1에 나와 있습니다. 2.

쌀. 2. 툴팁 유형

불행하게도 도구 설명에 애니메이션을 적용하는 데 사용할 수 있는 전환 속성은 의사 요소에서는 작동하지 않습니다. 그러므로 우리는 툴팁이 갑자기 나타나는 것에 만족해야 합니다. 또한 IE8 이하 브라우저에서는 효과가 없으며 이 버전은 ::after 를 지원하지 않습니다. 그러나 이 의사 요소를 :after 로 바꾸면 어느 정도 작업 옵션을 얻을 수 있습니다.

또는 어떤 HTML 요소에 툴팁이 있을 수 있는지

장에는 예제가 포함되어 있습니다. 툴팁 하이퍼텍스트 마크업 영역에서.

왼쪽 메뉴에는 현대적이고 매우 상세한 HTML 튜토리얼이 있습니다.

이를 통해 처음부터 웹사이트를 만들 수 있습니다., 그러나 지금은 조금 더 낮아 보입니다.

이번 장에서는 다음을 살펴보겠습니다.

시작하기 전에 HTML 툴팁, 정보를 읽어 보시기 바랍니다.

이것은 흥미로울 것입니다.

초기 인터넷의 주요 동향

1997년부터 최초의 브라우저가 등장한 이후 일부 소비자는 인터넷의 다양한 영역은 물론 정보 기술 및 컴퓨터 하드웨어 지원 분야에서도 적극적으로 전문화해 왔습니다. 많은 사용자가 웹 디자이너가 되어 개인 및 기업 웹 사이트를 만들기 시작하고 로컬 컴퓨터 네트워크 구축에 참여합니다. 이런 식으로 그들은 스스로 교육합니다. 이 상태는 오늘날까지 살아 남았습니다. 오늘날 월드 와이드 웹(World Wide Web)을 통해 지식을 얻는 것은 매우 세련되고 편리합니다. 오늘날, 특히 지난 세기 90년대 중반, 이전 사회주의 국가에는 프로그래밍 전문가가 필요했습니다. 수요가 있으면 공급이 있을 것입니다. 프로그래머는 집단 교육을 받습니다. 일부는 대학에서, 일부는 집에서 컴퓨터 화면 앞에서 교육을 받습니다. 요즘 같은 시대에는 젊은이와 비전문가가 자신의 경험과 아이디어를 교환하는 프로그래밍 포럼이 큰 인기를 얻고 있습니다.

HTML 링크 도움말

여기에서는 모든 것이 거의 동일합니다: title="" 속성 정의하다 HTML 툴팁 .

이미지의 alt=""는 이미지가 표시되지 않을 경우 페이지에 표시될 대체 텍스트를 지정합니다.

혼동하지 마세요 HTML툴팁과 대체 텍스트는 완전히 다르기 때문입니다.

텍스트에 대한 HTML 도구 설명

HTML 툴팁거의 모든 페이지 요소에 적용됩니다.

다르게 말하면 위의 예에서 친숙한 title=""은 모든 수준의 제목 태그, 단락 태그, 블록, 이미지 및 다음과 같은 선형 요소를 가질 수 있습니다. , 다른 사람.

나는 첫 번째 수준 제목 태그와 링크에 title="" 속성을 배치한 경험이 있습니다.

개인적으로 나는 사용한다 툴팁, 당연히 웹 사이트 텍스트의 검색 엔진 최적화에 대한 불가피한 아마추어 실험의 일부입니다. 내 실험이 얼마나 성공적이었는지 판단할 생각은 없습니다. 솔직히 이러한 최적화의 결과는 추적하기 어렵지만, 키워드나 문구로 무리하게 사용하기는 매우 쉽습니다. 따라서 항상 검색 엔진에 의해 처벌을 받을 위험이 있으므로 조심하고 프로모션에 과용하지 마십시오.

도구 설명은 텍스트나 이미지 위에 마우스를 올리기만 하면 추가 정보를 표시할 수 있는 좋은 방법입니다. 예를 들어, 사진 이름, 링크 설명 또는 리소스 사용자에게 유용할 수 있는 기타 정보를 표시하는 데 사용할 수 있습니다. 그리고 디자인 템플릿을 깨뜨릴 필요가 없습니다.

이 튜토리얼에서는 HTML과 CSS를 사용하여 링크의 제목 속성 내용을 표시하는 간단한 도구 설명을 만드는 방법을 살펴보겠습니다.

유용한 리소스 링크

클래스의 기본 스타일을 설정해 보겠습니다. 툴팁:

도구 설명( 표시: 인라인; 위치: 상대; )

이제 툴팁은 상대 위치 지정을 사용하여 링크와 함께 한 줄에 표시됩니다. 이제 도구 설명 블록의 둥근 모서리를 정의하고 링크 위에 배치해 보겠습니다.

도구 설명:hover:after( 배경: #333; 배경: rgba(0,0,0,.8); 테두리 반경: 5px; 하단: 26px; 색상: #fff; 내용: attr(제목); 왼쪽: 20 %; 패딩: 5px 15px;

마우스를 요소 위로 가져갈 때 요소를 선택하는 :hover 의사 클래스와 선택한 요소 뒤에 콘텐츠를 추가하는 :after 의사 클래스를 사용합니다. 배경은 부분적으로 투명하게 설정되며, RGBA 색상 형식을 지원하지 않는 브라우저의 경우 배경색이 회색으로 설정됩니다.

둥근 모서리는 border-radius 속성을 사용하여 생성됩니다. 텍스트 색상을 흰색으로 설정합니다. 마지막으로 툴팁 블록을 배치하고 패딩을 추가합니다.

스타일과 위치를 정의하는 것 외에도 콘텐츠 속성을 설정합니다.

내용: attr(제목);

이 속성을 사용하면 문자열 또는 요소 속성일 수 있는 콘텐츠를 삽입할 수 있습니다. 이 경우 링크의 title 속성을 사용합니다.

유용한 리소스 링크

완료하려면 도구 설명 하단에 화살표를 추가해야 합니다. 우리는 프레임에 대해 pseudo-class:before 및 스타일을 사용합니다.

도구 설명:hover:before( 테두리: 단색; 테두리 색상: #333 투명; 테두리 너비: 6px 6px 0 6px; 하단: 20px; 내용: ""; 왼쪽: 50%; 위치: 절대; Z-색인: 99 ;)

화살표를 만들기 위해 테두리 트릭을 사용했습니다. 왼쪽 및 오른쪽 테두리의 색상을 투명하게 설정하고 테두리 너비를 제어했습니다. 화살표는 도구 설명 아래에도 위치합니다.

HTML 도구 설명은 웹 페이지의 특정 요소 위로 마우스를 가져갈 때 나타나는 추가 정보가 포함된 블록입니다. 오늘은 HTML과 CSS를 사용하여 나만의 툴팁을 만들어 보겠습니다.

데모 보기 | 소스 코드 다운로드

링크, 태그, 스타일이 지정된 텍스트 등과 같은 대부분의 요소에 CSS 힌트를 사용할 수 있습니다. 요소에 여러 클래스를 적용하고 도구 설명 텍스트와 함께 data- 속성을 추가해야 합니다.

문서 설정

HTML 문서를 만들고 소스 마크업을 설정해야 합니다.

툴팁 데모

// 콘텐츠


모든 브라우저 스타일을 기본값으로 재설정하고 모든 요소가 모든 브라우저에서 동일하게 보이도록 보장하는 Normalize.css에 대한 링크를 추가했습니다. 표준 CSS 재설정과 달리 Normalize.css는 모든 기본 스타일을 제거하지 않으므로 모든 요소의 스타일을 처음부터 다시 작성할 필요가 없습니다.

HTML 도구 설명의 기본 예를 배치할 컨테이너 클래스를 사용하여 div를 만들었습니다. body 및 .container 클래스의 스타일은 다음과 같습니다.

본문( 글꼴 계열: "Work Sans", sans-serif; 글꼴 크기: 1.5em; 줄 높이: 1.4em; 글꼴 두께: 700; 배경색: #28ABE3; 색상: #fff; ) .container ( 너비: 800px; 여백: 100px 자동; 배경: 방사형 그라데이션(400px 250px에서 가장 먼 모서리 원, #64BBE0 0%, #28ABE3, #28ABE3 95%); )

margin-left 및 margin-right를 auto로 설정하여 컨테이너 div를 중앙에 배치했습니다. 또한 본문 섹션에 일부 스타일을 추가하여 더 보기 좋게 만들었습니다.

나는 배경에 작은 밝은 CSS 그라데이션을 추가하기로 결정했습니다. 브라우저가 CSS 그라데이션을 지원하지 않는 경우( 이는 주로 IE 8 및 9에 적용됩니다.), 배경색은 기본 파란색( 본문 섹션 배경색).

앵커 태그와 함께 HTML 호버 힌트를 사용하겠지만 강력한 태그나 범위와 같은 다른 인라인 요소에 클래스를 할당할 수도 있습니다. 다음은 컨테이너 div의 내용입니다.

  • 툴팁 상단
  • 툴팁 하단
  • 툴팁 왼쪽
  • 툴팁 오른쪽

글머리 기호 목록에는 앵커 태그가 있는 4개의 항목이 포함되어 있습니다. 목록 글머리 기호를 포함하지 않고 대신 inline-block 으로 표시되도록 목록 항목의 스타일을 변경했습니다. 이렇게 하면 그 사이에 패딩을 추가할 수 있습니다.

Tooltip-wrapper ( padding: 160px 0; text-align: center; ) .tooltip-wrapper li ( list-style: none; display: inline-block; margin: 0 10px; ) .tooltip-wrapper li a ( 색상: # fff; 텍스트 장식: 없음;

앵커 태그를 자세히 살펴보겠습니다.

툴팁 왼쪽

링크에 두 가지 클래스를 할당했습니다. 도구 설명 클래스는 도구 설명 본문을 담당하고 두 번째 클래스는 도구 설명의 배치를 결정합니다.

또한 HTML 도구 설명 텍스트가 포함된 사용자 정의 data- 속성을 볼 수도 있습니다.

툴팁 클래스 생성

다음은 도구 설명 클래스의 코드입니다.

도구 설명( 위치: 상대; ) .tooltip:after( 위치: 절대; 패딩: 8px; 테두리: 3px 단색 #fff; 테두리 반경: 8px; 배경색: #1FDA9A; 글꼴 크기: .9em; 글꼴 무게 : 굵게; 색상: #fff; 콘텐츠: attr(data-tooltip); /* 너비: -moz-max-content: 0; 가시성: 숨김; .tooltip:hover:after (불투명도: 1; 가시성: 가시성; )

HTML 호버 도구 설명 자체는 의사 요소 :after이며 절대적으로 위치합니다. 이것이 앵커 요소에 상대 위치를 할당해야 하는 이유입니다. 패딩, 테두리, 글꼴 크기 및 너비와 같은 몇 가지 기본 스타일을 추가했습니다. 콘텐츠 속성을 자세히 살펴보겠습니다.

여기에는 사용자 정의 데이터 도구 설명을 저장하고 도구 설명 자체의 텍스트를 표시하는 데 사용하는 값인 attr()이 포함되어 있습니다. data-tooltip 대신 다른 이름을 사용할 수 있습니다. data- 로 시작하는지 확인하세요. 여기에서 이러한 속성에 대해 자세히 알아볼 수 있습니다.

도구 설명 본문의 최소 너비는 80픽셀입니다. 도구 설명 내용을 한 줄로 늘리려면 현재 주석 처리된 width 속성에 max-content 값을 추가하세요. 이는 실험적인 기능이므로 공급업체 접두사 -webkit- 및 -moz- 를 사용해야 합니다.

HTML 호버 도구 설명에 슬라이드 애니메이션 효과를 제공하기 위해 전환 속성을 사용합니다. 도구 설명이 표시되거나 숨겨지기 전의 지연 시간을 지정하는 .25s 값을 확인하세요. 따라서 실수로 텍스트 위에 마우스를 올려 놓으면 표시되지 않고, 오랫동안 텍스트 위에 마우스를 올려 놓는 경우에만 표시됩니다. 또한 불투명도를 0으로 설정하고 가시성을 숨김으로 설정했습니다. 우리는 display: none을 사용할 수 없습니다. , 요소가 완전히 사라지고 전환 효과가 표시되지 않기 때문입니다. 마우스 포인터를 요소 위로 가져가면 불투명도와 가시성이 변경됩니다.

결과:

바라보다

메모: CodePen 데모에서 일부 마크업과 스타일을 변경/제거했습니다. 최종 결과를 보려면 이 기사 끝에 있는 데모를 확인하세요.

모션 추가

이제 마우스 오버 시 표시되거나 사라지는 HTML 툴팁을 구현했으므로 이를 이동시켜 보겠습니다. 우리는 이미 애니메이션 속성을 할당했습니다. 우리가 해야 할 일은 애니메이션이 나타나야 하는 시작 위치와 끝 위치를 설정하는 것뿐입니다.

/*초기 툴팁 위치*/ .tooltip-top:after ( 하단: 150%; 왼쪽: 0; ) .tooltip-bottom:after ( 상단: 155%; 왼쪽: 0; ) .tooltip-left:after ( 오른쪽: 130%; 최소 너비: 100px; ) .tooltip-right:after ( 왼쪽: 130%; 최소 너비: 100px; ) /*팁 끝 위치*/ .tooltip-top:hover:after ( 아래쪽: 120%; ) .tooltip-bottom:hover:after ( 위쪽: 125%; ) .tooltip-left:hover:after ( 오른쪽: 110%; ) .tooltip-right:hover:after ( 왼쪽: 110%; )

나는 이 기능을 추가 클래스에 추가하기로 결정했습니다. 따라서 예를 들어 .tooltip-left 클래스를 할당하면 도구 설명이 텍스트 왼쪽에 표시되고, .tooltip-top 을 추가하면 도구 설명이 상단에 표시됩니다.

데모 보기

이 데모에서는 .tooltip-right 클래스를 사용하고 있습니다. 다양한 클래스를 실험하고 사용하여 다양한 HTML 도구 설명 위치를 정의할 수 있습니다.

삼각형 만들기

도구 설명의 마지막 요소는 블록 한쪽에 있는 작은 삼각형입니다. :before 의사 클래스( :after 의사 클래스는 이미 툴팁 자체에 사용되었습니다.). 이를 4개의 위치 클래스에 할당하여 각각에 대해 삼각형이 그에 따라 출력되도록 합니다.

/** * 삼각형 */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( content: ""; 디스플레이: 블록; 위치: 절대; 테두리- 너비: 7px; 테두리 색상: rgba(0, 0, 0, 0); 전환: 모든 .2s 완화 .25s; top:hover:before, .tooltip-bottom:hover:before, .tooltip- left:hover:before, .tooltip-right:hover:before (불투명도: 1; 가시성: 표시; )

요소 자체에 너비나 높이가 없을 때 테두리에 너비를 지정하여 삼각형을 만듭니다. 이 경우 프레임 너비는 7픽셀로 설정됩니다. 프레임 색상은 완전히 투명하므로 매우 중요합니다. 다음 코드 조각에서는 프레임의 해당 측면에 색상을 할당하여 삼각형의 모양을 정의할 수 있습니다.

나머지 스타일은 HTML 호버 도구 설명 본문에 수행한 것과 유사합니다. 동일한 전환이 있으며 위치는 절대이고 불투명도는 0으로 설정되고 가시성은 숨겨집니다.

/*삼각형의 시작 위치*/ .tooltip-top:before ( 위쪽: -51%; 왼쪽: 50%; 변환: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom :이전( 하단: -56%; 왼쪽: 50%; 변환: 번역X(-50%); 테두리-하단-색상: #fff; ) .tooltip-left:before ( 왼쪽: -31%; 상단: 15% ; border -left-color: #fff; ) .tooltip-right:before ( 오른쪽: -31%; 위쪽: 15%; border-right-color: #fff; ) /* 삼각형의 끝 위치 */ .tooltip -top:hover :before ( 상단: -21%; ) .tooltip-bottom:hover:before ( 하단: -26%; ) .tooltip-left:hover:before ( 왼쪽: -11%; ) .tooltip-right :hover:이전( 오른쪽: -11%; )

도구 설명과 같은 방식으로 삼각형을 움직이게 하려면 시작 위치와 끝 위치를 지정해야 합니다.



질문이 있으신가요?

오타 신고

편집자에게 전송될 텍스트:

보내다