순수 CSS 구현(스크립트 없음) Html 명령형 툴팁 텍스트 프롬프트 효과

실행 프로세스를 분석하여 노드가 존재하는지 감지하여 툴팁 구현(클래스 이름, 속성 등)을 감지합니다. 다른 사람에게서 배울 수 있는 거품.

먼저 element-ui의 툴팁 스타일 을 살펴보겠습니다.

당연하게도 버블의 위치는 자바스크립트 스크립트를 통해 추가됩니다.

더 이상 고민하지 않고 몇 가지 기대치를 설정해 보겠습니다. JavaScript 스크립트는 필요하지 않습니다. 순수 CSS 구현에서는 새 요소를 추가할 필요가 없습니다**(의사 요소 전후 사용)** 속성 선택기를 직접 사용하여 클래스 이름 일치가 필요하지 않습니다** ([attr ])** 기본 스타일 지원** (태그가 테마와 위치를 정의하지 않는 경우)** 필수** (태그에서 직접 정의한 다음 일치를 위해 CSS에 남겨 둡니다)** sass 사용 버블 전처리기 개발의 주제와 위치를 구현하기 위해 (이해하지 못하는 학생은 CSS 로 변환 가능) html 정의 지시문 사양

 <button tooltip='나는 콘텐츠 덕' effect='light' 배치='top-left'>왼쪽 상단</button> 

• 툴팁 — 버블에 표시되는 콘텐츠입니다.
• 효과 - 버블 테마(어두움/밝음), 기본값은 어두움입니다.
• 배치 — 부모 요소를 기준으로 한 버블의 위치(위쪽 / 왼쪽 위 / 오른쪽 위 / 오른쪽 / 오른쪽 위 / 오른쪽 아래...), 기본값은 위쪽입니다.

먼저 몇 가지 버튼을 작성하세요.

스타일 참조 요소-ui

 <div class=container> <div class=top> <button tooltip=top place=top-left effect=light>왼쪽 위</button> <button tooltip=왼쪽 위 왼쪽 위 배치=top>위</button> < 버튼 tooltip=top-right 배치=top-right>오른쪽 상단</button> </div> <div class=left> <버튼 tooltip=왼쪽 위 왼쪽 위 왼쪽 위 왼쪽 위 왼쪽 위 왼쪽 위 왼쪽 위 왼쪽 위 왼쪽 위 왼쪽 위 배치=left-top>왼쪽 위</button> <button tooltip=왼쪽 배치=왼쪽 효과=빛>왼쪽</button> < 버튼 tooltip=왼쪽 및 오른쪽 배치=left-bottom >왼쪽 아래</button> </div> <div class=right> <버튼 tooltip=오른쪽 위 오른쪽 위 오른쪽 위 오른쪽 위 오른쪽 위 오른쪽 위 오른쪽 위 오른쪽 위 오른쪽 위 Placement=right-top>오른쪽 위</button> <button tooltip=right place=right effect=light>오른쪽</button> < 버튼 tooltip=오른쪽 하단 배치=right-bottom> 오른쪽 하단</button> </div> <div class=bottom> <button tooltip=왼쪽 하단 왼쪽 하단 배치=bottom-left>왼쪽 하단</button> <button tooltip=하단 배치=하단 효과=빛>하단</button> <button tooltip=하단 오른쪽 배치=하단-오른쪽>하단 오른쪽</button> </div></div>

hover는 안팎으로 마우스 움직임을 모니터링하고 **[도구 설명]**은 이 속성이 있는 레이블과 일치하며 뒤는 거품, 앞은 삼각형입니다.

 /* 툴팁 속성과 일치하는 요소 */[tooltip] { position:relative; /* 거품의 기본 스타일*/ &::after { display: none; attr(tooltip) } /* 삼각형의 기본 스타일* / & ::before { display: none; content: '' } /* 거품과 삼각형을 표시하려면 요소로 마우스를 이동하세요. */ &:hover { &::after { display: block } &::before; 표시: 차단 } }}

이제 마우스를 이동하면 효과가 적용됩니다.

효과를 쉽게 확인하기 위해 테스트에서는 기본적으로 거품과 삼각형을 차단할 수 있습니다.

 /* 거품의 기본 스타일*/&::after { display: block; content: attr(tooltip);}/* 삼각형의 기본 스타일*/&::before { display: block content: '';}

현재 효과는 다음과 같습니다

코어 디스플레이는 물론 절대 위치 지정으로 설정되어 있습니다.

 /* 버블 기본 스타일 */&::after { display: block; attr(tooltip); position: 공백: nowrap: text-overflow: ellipsis; 너비: 200px; 테두리 반경: 4px; 상자 그림자: 0 10px 20px -5px rgba(0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark; /* 기본 테마 상속(검은색 배경에 흰색 텍스트) */ }/* 삼각형 기본 스타일 */&::before { block; content : ''; position:absolute; border: 5px solid transparent; @extend .triangle-theme-dark; */}

현재 효과는 다음과 같습니다

각각 두 가지 테마를 정의합니다.

 $white: #fff;$black: #313131;/* 풍선 테마*/.tooltip-theme-dark { color: $white; background-color: $black;}.tooltip-theme-light { color: $black; background-color: $white; border: 1px solid $black;}/* 삼각형 테마*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black; /* 현재는 어두운 색상과 같습니다*/}

 /* 버블 위치*//*--상단----*/.tooltip-placement-top { 하단: calc(100% + 10px) 왼쪽: 50%; 변환(-50%, 0) );}.tooltip-placement-top-right { 하단: 계산(100% + 10px); 왼쪽: 100%; 변환(-100%, 0)}.tooltip-placement-top-left { 하단: 계산(100% + 10px); 왼쪽: 0; 변환: 번역(0, 0)}/* 삼각형 위치*//*----top-- --*/.triangle-placement-top { 하단: calc(100% + 5px); 왼쪽: 50%; 변환: 번역(-50%, 0);}.triangle-placement-top-left { 하단: calc(100% + 5px); 왼쪽: 10px;}.triangle-placement-top-right { 하단: calc(100% + 5px) 오른쪽: 10px;}

이는 핵심 코드이기도 합니다. 속성 선택기를 사용하여 라벨의 값을 일치시킨 다음 다른 스타일을 설정하세요.

일치하는 거품, 삼각형 테마

 &[효과=빛] { &::after { @extend .tooltip-theme-light } &::before { @extend .triangle-theme-light }}

버블 및 삼각형 위치 일치(12개 위치)

 @각 $placement는 상단, 오른쪽 상단, 왼쪽 상단, 오른쪽, 오른쪽 상단, 오른쪽 하단, 하단, 오른쪽 하단, 왼쪽 하단, 왼쪽, 왼쪽 상단, 왼쪽 하단 { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement} } &::before { @extend .triangle-placement-#{$placement} } };

라벨에 배치 속성이 없거나 비어 있는 경우 기본적으로 상단 위치가 상속됩니다.

 &:not([placement]),&[placement=] { &::after { @extend .tooltip-placement-top } &::before { @extend .triangle-placement-top }}

현재 효과는 다음과 같습니다

텍스트를 더 길게 만들고 기본 스타일인 풍선과 삼각형에 display:none을 추가해 보겠습니다.

상하좌우 4방향으로 나누어 4개의 애니메이션

 @keyframes anime-top { 불투명도: .5; 하단: }}@keyframes anime-bottom { 불투명도: .5; 상단: 150% }}@keyframes anime-left { 불투명도: .5; 오른쪽: 150%; }}@keyframes 애니메이션-오른쪽 { 불투명도: .5 왼쪽: }}

실행할 애니메이션을 결정하려면 버블 위치를 일치시키세요. 예를 들어 왼쪽 상단과 오른쪽 상단도 일치시킬 수 있습니다.

 /* 애니메이션 설정*/@각 $placement in top, right,bottom,left { &[placement^=#{$placement}] { &::after, &::before { animation: anime-#{$placement} 300ms 이지아웃 앞으로 } }}

최종 효과는 다음과 같습니다

첨부된 코드펜 주소는 codepen.io/anon/pen/yR…

위 내용은 편집자가 소개한 순수 CSS 구현(스크립트 없음)입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 답변해 드리겠습니다. 시간. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!