CSS3만으로 반응형 툴팁을 어떻게 만들 수 있습니까?

질문

그래서 단락에 툴팁이있는 단어가 있습니다.

<div>
  lorem 
  <div class="word">
    ipsum
    <div class="definition">this will be the tooltip text</div>
  </div> 
  blah blah blah
</div>

Expand snippet

지금은 jQuery를 사용하여 마우스 오버시 definition요소가 표시되도록 설정했습니다.

단어 ipsum 은 동적 단어가되고 정의는 동적 단어 집합이됩니다. 패딩이있는 ipsum단어의 중앙에있는 동안 정의가 ipsum위에 있어야합니다.

ipsum 은 단락이 방해받지 않도록 인라인 또는 인라인 블록이어야합니다.

CSS 만 사용하는 동적 크기로 정의 요소를 ipsum단어 위에 완벽하게 중앙에 배치하려면 어떻게해야합니까?

나는 그것을 요소의 왼쪽 중앙에 놓거나 상대 위치의 중앙에 계속 배치하지만 단어 요소에 있으면 안되는 공간을 차지합니다.

답변1

body {padding:50px} /* for demonstration */

.word {
  display: inline-block;
  position: relative;
  background-color: lightyellow;
}

.definition { 
  display: none;
}

.word:hover > .definition {
  display: inline-block;
  position: absolute;
  bottom: 100%;
  left: calc(50%);
  transform: translateX(-50%);
  padding: 3px;
  border: 1px solid blue;
  white-space: nowrap;
}

<div>
  lorem 
  <div class="word">
    ipsum
    <div class="definition">this will be the tooltip text</div>
  </div> 
  blah blah blah
</div>

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/48350185/how-can-i-create-a-responsive-tooltip-with-just-css3