Frudy
6k
2020-10-14 22:00:24 작성 2020-10-14 22:00:44 수정됨
1
100

Pure Css로, 부모보다 길어질 수 있는 툴팁 만드는 방법 아시는분 계신가요?



Tooltip만들기 W3c부터 시작해서

다양한 툴팁 (Material UI부터 Bootstrap, 기타 다른사람이 올린 툴팁코드, 스택오버플로우까지)

소스코드를 다 분석해보고나서도 해결이 미적지근해서요.


상황과 조건은 이렇습니다.

1. 대체로 툴팁은, 부모가 relative이고,  자식이 absolute로 구현하더군요.

2. 그런데 툴팁안에 오는 내용이 저 로렘잎숨처럼 길어질 수 있는 경우, 길이제한을 하고싶어요. ( 위 캡처본처럼, 길이제한을 하되 부모보다는 길게)

3. 그대신 툴팁안에 오는 내용이 짧으면 당연히 툴팁 길이도 짧아야해요. 

이렇게요.


4. 이 모든것을, 오로지 CSS로만 JS없이 하고싶어요.


제가 겪었던 애로사항을 음.. 일단 글로 적고, 실제 소스코드 첨부할게요.


absolute 자식은 relative부모보다 width가 길어지려면,

자식 width를 고정으로 부모보다 크게 width: 500px; 이런식으로 잡는 방법 외에는 보지를 못했어요.


https://developer.mozilla.org/ko/docs/Web/CSS/All_About_The_Containing_Block

absolute의 가로길이의 기준은 가장 가까운 static이 아닌 요소래요...


저는 이걸 width: max-content라는 찝찝한 속성 (IE지원안됨) 을

툴팁에 주는것으로 해결했어요.


<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tooltip-container {
position: relative;
background-color: green;
color: white;
font-weight: bold;
font-size: 20px;
margin-bottom: 200px;

/*핵심
부모컨테이너 width가 작은데,
이거보다 툴팁 길이가 더 길어졌을 때
툴팁의 길이제한을 부모보다는 길게 하고싶은 경우..*/
width: 200px;
}

.tooltip-container:hover > .tooltip {
opacity: 1;
visibility: visible;
}

.tooltip {
position: absolute;
left: 0;
top: 100%;
margin-top: 10px;
background-color: black;
color: white;
padding: 10px;
transition: 0.2s;
visibility: hidden;
opacity: 0;
z-index: 20;

max-width: 400px;
word-break: break-word;

/* 핵심. max-content속성을 선언하지않을경우, absolute 자식이 부모보다 더 길어지지를않음. */
width: max-content;
}
</style>
</head>
<body>
<div class="tooltip-container">
<span>Hover Me!!</span>
<div class="tooltip">
Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="tooltip-container">
<span>Hover Me!!</span>
<div class="tooltip">
Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.
</div>
</div>
</body>
</html>


툴팁 텍스트에 공백이 있고 / 없고 둘 다 대응이 되도록 테스트해봤습니다.

CSS 고수님들 답변부탁드립니다.

0
  • 답변 1

  • 초보자1212
    1k
    2020-10-15 00:08:22

    예를 들어 부모가 500px 인데 자식은 1000px 로 하고싶다

    이럴 때 가장 쉽게 할 수 있는 방식이 margin 에 음수 값을 주는 방법이 있습니다.

    자식 길이가 똑같이 500px 이라고 가정할 때 자식에다가 

    width: auto 를 주고

    margin-left: -100px;

    이런식으로 주시면 됩니다.


    근데 자식이 absolute 로 되어있으면 위 방식처럼 할수는 없습니다

    그래서 margin-top 역시 음수로 주셔서 위로 올리는 방식도 있답니다

    예시로 링크 드릴테니까 참고해보세용

    https://jsfiddle.net/yuz76xoq/1/

  • 로그인을 하시면 답변 을 등록할 수 있습니다.