HTML 요소의 계단식 효과를 얻는 방법은 무엇입니까?

Question

이 요소에 대한 사용자 정의 도구 설명을 만들고 싶었지만 도구 설명을 표시할 충분한 공간이 없는 상자 안에 포함되어 있어서 잘립니다. (실제로는 <코드>로 인해 표시됩니다. ;overflow가 auto로 설정되어 있지만 스크롤하지 않고 표시되기를 원합니다. 범위를 넘어 표시되도록 하는 방법이 있나요? z-index를 사용해 보았지만 작동하지 않았습니다.

제가 말한 내용은 다음과 같습니다.

.box {
  너비: 100px;
  높이: 100px;
  오버플로: 자동;
  테두리 스타일: 단색;
  테두리 색상: 빨간색;
}

.툴팁{
  패딩 상단: 20px;
  위치: 상대;
  디스플레이: 인라인 블록;
}


.tooltip .tooltiptext {
  디스플레이: 없음;
  최대 너비: 60vw;
  최소 너비: 15vw;
  배경색: 흰색;
  테두리 스타일: 단색;
  테두리 색상: #1a7bd9;
  위치: 절대;
  Z-색인: 1000000;
}

.tooltip:hover .tooltiptext {
  디스플레이: 블록;
}

  
 마우스를 올리면 툴팁 표시
    

      와, 이거 정말 대단해요. 정말 멋진 툴팁 텍스트네요
    
  

Answer 1

이를 수행하는 한 가지 방법은 마우스를 올린 텍스트 위와 옆에 위치하는 ::before의사 요소를 만드는 것입니다.

으아악 으아악

Answer 2

이 작업을 수행하는 방법은 여러 가지가 있지만 도구 설명이 컨테이너 외부에 표시되도록 하려면 z-index或overflow를 사용할 필요가 없습니다. 도구 설명을 상대 컨테이너 내부의 위치 지정 컨텍스트로 이동하면 됩니다.

귀하의 의견에 따르면 텍스트 위로 마우스를 가져갈 때만 도구 설명이 나타나도록 하기를 원하므로 마우스로 가져갈 항목을 상대 컨테이너에 정확하게 래핑하는 것이 좋습니다. 이를 설명하기 위해 상대 컨테이너를 사용하기로 결정한 위치와 비교하여 외부 프레임에 테두리를 추가했습니다.

그런 다음 box:hover更改为relative-container:hover를 올바른 요소에 배치하세요.

HTML과 클래스 이름을 좀 더 의미있고 간결하게 구성하려고 노력했습니다. 도움이 되었기를 바랍니다!

예

으아악 으아악