CSS를 사용하면 :after를 사용하여 도구 설명에 작은 화살표를 추가할 수 있습니다. 그와 함께 content 속성도 사용하십시오.
다음 코드를 실행하여 도구 설명에 화살표를 추가할 수 있습니다.
예
<스타일> .mytooltip .mytext { 가시성:숨김; 너비:140px; 배경색:파란색; 색상:#fff; z-인덱스:1; 하단:100%; 왼쪽:60%; 여백-왼쪽:-90px; 텍스트 정렬:가운데; 테두리 반경:6px; 패딩:5px 0; 위치:절대; } .mytooltip { 위치:상대; 디스플레이:인라인 블록; 여백 상단:50px; } .mytooltip .mytext:after { 내용:""; 위치:절대; 상단:100%; 왼쪽:50%; 여백-왼쪽:-10px; 테두리 너비:7px; 테두리 스타일:솔리드; 테두리 색상:파란색 투명 투명 투명; } .mytooltip:hover .mytext { 가시성:가시성; } 마우스 커서를 나 위에 두기 내 도구 설명 텍스트