CSS 툴팁 - SCSS 변환이 작동하지 않습니다.

thoughtbot 블로그에서 발견 한 CSS 툴팁이 올바르게 작동하려고합니다. 코드에 대한 유일한 변경 사항은 Scss에서 CSS로 변경하고 html 터치를 단순화하는 것입니다. 그러나 CSS에서는 작동하지 않습니다. A는 내가 어떤 도움을 크게 감상 할 수 https://robots.thoughtbot.com/you-don-t-need-javascript-for-that CSS 툴팁 - SCSS 변환이 작동하지 않습니다.

.container { 
    margin-top: 100px; 
    margin-left: 100px; 
    border: 2px solid red; 
} 



/* //The good stuff */ 
.tooltip-toggle { 
    cursor: pointer; 
    position: relative; 
} 


/* //Tooltip text container */ 
.tooltip-toggle::before { 
    position: absolute; 
    top: -80px; 
    left: -80px; 
    background-color: #2B222A; 
    border-radius: 5px; 
    color: #fff; 
    content: attr(data-tooltip); 
    padding: 1rem; 
    text-transform: none; 
    transition: all 0.5s ease; 
    width: 160px; 
} 
/* 
    //Tooltip arrow */ 
.tooltip-toggle::after { 
    position: absolute; 
    top: -12px; 
    left: 9px; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #2B222A; 
    content: " "; 
    font-size: 0; 
    line-height: 0; 
    margin-left: -5px; 
    width: 0; 
} 

.tooltip-toggle::before { 
    color: #efefef; 
    font-family: monospace; 
    font-size: 16px; 
    opacity: 0; 
    pointer-events: none; 
    text-align: center; 
} 

.tooltip-toggle::after { 
    color: #efefef; 
    font-family: monospace; 
    font-size: 16px; 
    opacity: 0; 
    pointer-events: none; 
    text-align: center; 
} 

/* //Triggering the transition */ 
.tooltip-toogle:hover::before { 
    opacity: 1; 
    transition: all 0.75s ease; 
} 
.tooltip-toggle:hover::after { 
    opacity: 1; 
    transition: all 0.75s ease; 
}

내 CSS 버전에 대한 기초로 복사 한 codepen 워킹도이다

원래 기사

는 여기에서 찾을 수 있습니다. 아래는 내 HTML입니다. 나는이 문제를 알아 냈 때

<html> 
    <body> 
    <div class="container tooltip-toggle" data-tooltip="Sample text for your tooltip!> 
     <div class="label">Hello 
     </div> 
    </div> 
    </body> 
</html>

출처

2016-06-03 matt-p

그래서, 나는 아주 열심히 웃었다 :

/* //Triggering the transition */ 
.tooltip-toogle:hover::before { 
    opacity: 1; 
    transition: all 0.75s ease; 
}

.tooltip- 켜고 끌가 : 롤 전환해야한다 분명히

를 가져.

편집 : 청소 CSS와는

.container { 
    margin-top: 100px; 
    margin-left: 100px; 
    border: 2px solid red; 
} 


/* The good stuff */ 
.tooltip-toggle { 
    cursor: pointer; 
    position: relative; 
} 

/* Tooltip text container */ 
.tooltip-toggle::before { 
    position: absolute; 
    top: -80px; 
    left: -80px; 
    background-color: #2B222A; 
    border-radius: 5px; 
    color: #fff; 
    content: attr(data-tooltip); 
    padding: 1rem; 
    text-transform: none; 
    transition: all 0.5s ease; 
    width: 160px; 
} 

/* Tooltip arrow */ 
.tooltip-toggle::after { 
    position: absolute; 
    top: -12px; 
    left: 9px; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #2B222A; 
    content: " "; 
    font-size: 0; 
    line-height: 0; 
    margin-left: -5px; 
    width: 0; 
} 

.tooltip-toggle::before, .tooltip-toggle::after { 
    color: #efefef; 
    font-family: monospace; 
    font-size: 16px; 
    opacity: 0; 
    pointer-events: none; 
    text-align: center; 
} 


/* Triggering the transition */ 

.tooltip-toogle:hover::before, .tooltip-toggle:hover::after { 
    opacity: 1; 
    transition: all 0.75s ease; 
}

출처

2016-06-03 10:31:51 Kershrew

오 친애하는, 적어도 당신에게 웃음을 준 고정! 고맙습니다! –

문제가 없다면 그대로 받아 들여야합니다;) 나는 많은 CSS를 반복 해 봤습니다. 같은 스타일을 사용하는 셀렉터를 쉼표로 쉽게 그룹화 할 수 있습니다. 위의 편집을 참조하십시오 :) – Kershrew

CSS 툴팁 - SCSS 변환이 작동하지 않습니다.

답변

관련 문제