/** * Tooltips classes * * @author splitfire - http://splitfire.fr * @version 1.0 * */ /* Var -----------------------------*/ $prefix : tooltip; $contentAttr : data-tooltip; $trigger : data-trigger; $placement : data-placement; .#{$prefix} { position: relative; outline: none; /* Tooltip --------------------*/ &:after, &:before { position: absolute; display: none\9; //:after:hover doesn't work with ie8 opacity: 0; @include transition (opacity .20s linear 0s); visibility:hidden; outline: none; text-decoration: none; line-height: normal; } &:after { @include box-sizing(border-box); padding:6px; background-color: black; background-color: rgba(black, .8); color:white; white-space: nowrap; content: attr(#{$contentAttr}); } /* Tooltip trigger --------------------*/ &[#{$trigger}="hover"]:hover:before, &[#{$trigger}="hover"]:hover:after, &[#{$trigger}="focus"]:focus:before, &[#{$trigger}="focus"]:focus:after { display: block\9; //:after:hover doesn't work with ie8 opacity: 1; @include transition (opacity .20s linear 0s); visibility: visible; z-index: 2; } /* Tooltip placement top ----------------------------*/ &[#{$placement}="top"]:after, &[#{$placement}="top"]:before { bottom:100%; } &[#{$placement}="top"]:after { left:50%; margin:0 0 15px 0; @include border-radius(4px); @include transform (translate(-50%)); } &[#{$placement}="top"]:before { left: 50%; @include transform (translate(-50%)); border-right: 8px solid transparent; border-left: 8px solid transparent; border-top: 8px solid black; border-top: 8px solid rgba(black, .8); content: ""; margin:0 0 8px 0; } /* Tooltip placement right ----------------------------*/ &[#{$placement}="right"]:after, &[#{$placement}="right"]:before { left:100%; } &[#{$placement}="right"]:after { top:50%; margin:0 0 0 15px; @include border-radius(4px); @include transform (translate(0,-50%)); } &[#{$placement}="right"]:before { top:50%; @include transform (translate(0,-50%)); margin: 0 0 0 7px; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-right: 8px solid black; border-right: 8px solid rgba(black, .8); content: ""; } /* Tooltip placement Bottom ------------------------------*/ &[#{$placement}="bottom"]:after, &[#{$placement}="bottom"]:before { top:100%; } &[#{$placement}="bottom"]:after { left:50%; margin:15px 0 0 0; @include border-radius(4px); @include transform (translate(-50%)); } &[#{$placement}="bottom"]:before { left:50%; @include transform (translate(-50%)); margin:7px 0 0 0; border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 8px solid black; border-bottom: 8px solid rgba(black, .8); content: ""; } /* Tooltip placement left ----------------------------*/ &[#{$placement}="left"]:after, &[#{$placement}="left"]:before { right:100%; } &[#{$placement}="left"]:after { top:50%; @include transform (translate(0,-50%)); margin:0 15px 0 0; @include border-radius(4px); } &[#{$placement}="left"]:before { top:50%; @include transform (translate(0,-50%)); margin: 0 7px 0 0; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid black; border-left: 8px solid rgba(black, .8); content: ""; } /*Tooltip default placement and trigger -----------------------------------------*/ &:not([#{$placement}]) //Tooltip default placement { //@extend .#{$prefix}[data-placement="top"]; } &:not([#{$trigger}]) // Tooltip default trigger { //@extend .#{$prefix}[data-trigger="hover"]; } }