정말 유용한 툴팁입니다. CSS의 툴팁. 툴팁의 영향력 증가

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

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

오늘은 CSS를 사용하여 툴팁을 만들어 보겠습니다. 도구 설명은 마우스를 위에 올리면 표시되는 내용입니다. 예를 들어 제목 속성에 설명이 포함된 링크가 표시됩니다.

툴팁은 링크와 이미지 모두에 사용할 수 있습니다.

원시 형태의 툴팁은 다음과 같습니다.

툴팁은 title 속성을 사용하는 표준 시스템 방식으로 표시됩니다.
장식 없이 툴팁이 포함된 표준 링크 코드:

링크

툴팁 CSS

CSS를 사용하여 도구 설명의 스타일을 지정할 수 있습니다. 세 가지 옵션을 살펴보겠습니다. CSS의 툴팁.

불행하게도 제목 디자인에 대한 CSS "레시피"가 없으므로 추가 속성을 추가하고 해당 디자인을 지정한 다음 아름다운 제목을 만들고 싶은 링크/이미지 코드에 추가해야 합니다. 툴팁 CSS.

첫 번째 예에서는 다음을 수행합니다. 툴팁 CSS맨 아래 이미지 위에.

이를 위해 이미지라는 두 가지 속성을 사용하고, 툴팁이 작동하려면 ::after 및 data-text를 사용하여 툴팁 텍스트를 표시합니다.

이 예의 CSS 스타일은 다음과 같습니다.

이미지 ( 디스플레이: 인라인 블록; 위치: 상대; ) .image:hover::after ( content: attr(data-text); /* 도구 설명 텍스트 표시 */ 위치: 절대; 왼쪽: 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; /* 글꼴 크기: 11px; * 도구 설명 텍스트 크기 * / padding: 5px 10px; /* 여백 */ border: 1px solid #333; /* 테두리 옵션 */ )

1

결과:

이 디자인은 링크에는 작동하지 않으므로 링크에 대해 약간 다른 옵션을 사용하겠습니다.
첫 번째 옵션은 링크 위에 도구 설명을 표시합니다.

Podskazka( 디스플레이: 인라인; 위치: 상대;).podskazka:hover:after( 배경: #333; 배경: rgba(204,102,0,.8); 테두리 반경: 5px; 하단: 26px; 색상: #fff; content: attr(title); padding: 5px 15px; position: Absolute; width: auto;).podskazka:hover:before( /* 툴팁 블록 하단에 화살표 추가 */ border : solid; border-color: #cc6600 투명; 테두리 너비: 6px 6px 0 6px; 내용: "";

링크

마지막 옵션은 링크 아래에 툴팁을 표시하는 것입니다. 이 옵션은 이전 옵션과 유사하며 아래에는 툴팁만 표시됩니다.

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; /* 모서리를 둥글게 만듭니다. */ -khtml-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;)

이번 강의에서 우리가 할 일은 마우스 오버 시 툴팁깨끗한 아이콘에 CSS. 똑같은 원리가 그림에도 적용될 수 있습니다. 보기로 이동 데모 페이지 .

HTML 마크업

5개 항목의 목록을 만들어 보겠습니다. 각 항목 안에 태그를 배치합니다. 나원하는 아이콘으로, 사이트에서 특정 아이콘에 대한 코드를 복사하기만 하면 됩니다. 멋진 글꼴.

아이콘 태그 아래에 태그를 작성하겠습니다. 기간해당하는 짧은 힌트 텍스트를 사용하세요.

• 
  
  편안한 객실
  


• 
  
  신용 카드
  


• 
  
  객실 내 샤워
  


• 
  
  아침 식사 포함
  


• 
  
  애완동물 출입 가능
  

그런 다음 스타일 파일을 연결하십시오. 스타일.css. 아이콘 위치를 세로에서 가로로 변경합니다.

이렇게 하려면 상위 컨테이너에 값을 할당합니다. 몸을 풀다.

울(
디스플레이: 플렉스;
}

아이콘 아래의 배경색과 아이콘 자체의 색상을 지정합니다.

울리(
배경: #cecfcf;
색상: #fff;
}

아이콘 크기는 글꼴 크기를 사용하여 설정됩니다.

울리(
글꼴 크기: 40px;
}

아이콘 행의 모양은 이미 형성되어 있습니다.

아이콘 위에 커서를 올리면 아이콘 색상과 커서 모양이 변경됩니다.

울리:호버(
색상: #03a9f4;
커서: 포인터;
}

툴팁

아이콘 위로 마우스를 가져가면 직사각형 블록에 텍스트 힌트가 나타납니다. HTML마크업은 태그의 텍스트입니다. 기간. 아이콘 위에 힌트를 배치해 보겠습니다.

울리 스팬(
위치: 절대;
상단: -30px;
왼쪽: 50%;
변환: 번역X(-50%) 번역Y(-20px);
}

상자 크기를 다음과 같은 고정 크기로 설정해 보겠습니다.

울리 스팬(
너비: 120px;
높이: 24px;
}

텍스트를 수직 및 수평 중앙에 정렬합니다.

울리 스팬(
줄 높이: 24px;
텍스트 정렬: 중앙;
}

배경색, 텍스트 색상 및 텍스트 크기.

울리 스팬(
배경: #03a9f4;
색상: #fff;
글꼴 크기: 14px;
}

모서리를 4픽셀씩 둥글게 만들고 마우스를 가져갈 때 부드럽게 전환됩니다.

울리 스팬(
테두리 반경: 4px;
전환: 0.5초;
}

툴팁보이지 않고 투명해집니다.

울리 스팬(
불투명도: 0;
가시성: 숨김;
}

의사 요소::이전

블록 아래에 작은 화살표를 그리기 위해 의사 요소를 사용합니다. ::전에이는 실제로 화살표가 실제로 누락되었음을 의미합니다. HTML파일(비어있음 콘텐츠), 그러나 다음에만 존재합니다. CSS파일. 끝이 아이콘을 가리키는 화살표는 10x10 픽셀 정사각형 모양에 불과하며 45도 회전되어 블록에 눌려 있습니다. 기간음수 값으로. 결과적으로 사각형은 삼각형으로 변환되어 아래 레이어에 놓이게 됩니다. Z-색인: -1상위 태그보다 기간.

저자로부터:안녕하세요. 도구 설명은 요소(일반적으로 이미지) 위로 마우스를 가져갈 때 나타나는 작은 설명 텍스트입니다. 오늘은 다양한 방법으로 HTML에서 툴팁을 만드는 방법을 살펴보겠습니다.

표준 힌트

기본적으로 title 속성은 설명 텍스트를 표시하는 역할을 합니다. 다양한 요소에 사용될 수 있지만 일반적으로 표시되는 내용을 설명하기 위해 그림에만 사용됩니다.

이전 기사 중 하나에서는 호랑이 이미지를 사용하여 사진 크기 작업을 보여주었습니다. 괜찮으시다면 이 이미지를 다시 사용하겠습니다. 따라서 힌트를 표시하려면 제목 속성을 추가하고 그 안에 원하는 텍스트를 작성하면 됩니다.

하나의 단어가 있을 수도 있고 여러 개의 문장이 있을 수도 있습니다. 그리고 이것은 다음과 같습니다:

힌트는 호버링 직후가 아니라 일정 시간이 지나면 원활하게 나타납니다. 이것이 기본 동작입니다.

이러한 툴팁의 주요 문제점은 스타일을 지정할 수 없다는 것입니다. 이 문제를 해결하는 방법은 무엇입니까? 다른 방법으로 힌트를 주어야합니다. 이제 몇 가지를 보여 드리겠습니다.

순수 CSS 방법

이미지에 대한 힌트를 아름답게 표시할 수 있는 매우 흥미로운 방법입니다. HTML 마크업은 간단합니다. 이미지만 블록 컨테이너에 넣어야 하며 나중에 스타일에서 참조할 수 있도록 식별자를 할당할 것입니다.

여기서 명확하지 않을 수 있는 유일한 것은 data-name 속성입니다. 문제는 이것이 소위 데이터 속성이라는 것인데, 그 자체로는 아무것도 하지 않지만 그 값은 CSS와 자바스크립트에서 사용될 수 있어 어떤 경우에는 유용합니다. 이것을 다음에 보게 될 것입니다.

먼저 컨테이너의 스타일을 설명하겠습니다. 전체 페이지가 아닌 상위 블록을 기준으로 위치 지정이 발생하도록 설명 텍스트가 있는 블록의 위치를 ​​절대적으로 지정하므로 상대 위치 지정이 필요합니다.

#tiger( 위치: 상대; 표시: 인라인 블록; )

블록 라인 표시는 블록(그리고 우리가 생성할 도구 설명이 포함된 블록)이 창의 전체 너비에 걸쳐 늘어나는 것을 방지합니다. 남은 것은 힌트 자체를 만드는 것뿐입니다. CSS에서는 의사 요소를 사용하여 이를 수행하는 것이 매우 편리합니다. 이와 같이:

#tiger:hover:after ( 내용: attr(데이터 이름); 위치: 절대; 왼쪽: 0; 아래쪽: 0; 배경: rgba(5,13,156,.55); 색상: #fff; 텍스트 정렬: 가운데 ; 글꼴 계열: 필기체; 글꼴 크기: 14px; 100%

코드는 많지만 여기에는 복잡한 것이 없습니다. #tiger:hover:after 선택기는 다음을 의미합니다. 이미지가 있는 블록 위로 마우스를 가져가면 after 의사 요소를 생성해야 합니다(그런 다음 규칙은 중괄호 안에 나열됩니다). content: attr(data-name) 속성은 블록의 텍스트 값을 설정합니다. 이는 이미지 래퍼 블록의 data-name 속성에 작성된 내용과 동일합니다.

이 툴팁은 이미지 위에 마우스를 올렸을 때 나타나는데, 일반 툴팁과 달리 갑자기 나타나며, 마우스를 올려놓은 순간 나타나는 모습 자체가 바로 나타납니다. 이 경우 의사 요소에는 부드러운 전환이 지원되지 않으므로 부드러운 전환을 구현할 수 없습니다.

방법 2. 순수한 CSS와 부드러운 외관

그러나 코드를 꽤 많이 다시 작성하면 자바스크립트를 사용하지 않고도 툴팁의 매끄러운 모양을 얻을 수 있습니다.

다음에 보여줄 2가지 효과를 직접 확인하려면 메모장이나 편리한 코드 편집기를 열고 모든 작업을 반복하는 것이 좋습니다. 사실, 스타일을 태그에 html로 작성할 수도 있지만 이를 위해서는 여전히 스타일 파일을 포함해야 합니다.