File: public/dzstooltip/dzstooltip.scss

/*

dzs tooltips

arrow-top,
arrow-bottom
 -- align-left
 -- align-center (js)
 -- align-top

arrow-left,
arrow-right
 -- align-top
 -- align-center (js)
 -- align-bottom


custom css3 effects

*see about custom animation

*/

@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-moz-transition-timing-function:$transition-timing;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-webkit-transition-timing-function:$transition-timing;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-o-transition-timing-function:$transition-timing;-ms-transition-property:$transition-property;
  -ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing;
}

@mixin boxsizing() {
  -moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}




$transition-property: visibility, opacity;
$transition-duration: 0.3s;
$transition-timing: ease-out;


$color_bg: rgba(20,20,20, 0.9);
$color_txt: #eeeeee;
.dzstooltip-con{
  position: relative;
  cursor: pointer;

}

.dzstooltip{
  display: inline-block;
  position: absolute;
  cursor: auto;
  visibility: hidden;
  opacity: 0;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
  @include boxsizing();

  bottom: 100%;
  left:-5px;

  font-size: 13px;
  line-height: 150%;

  margin-bottom: 10px;

  background-color: $color_bg;
  color: $color_txt;
  padding: 10px 15px;

  width: 600px;



  transform: translate3d(0,0px,0);
  -webkit-transform: translate3d(0,0px,0);
}



.dzstooltip.arrow-top{
  top: 100%;
  bottom: auto;
  margin-top: 10px;
  margin-bottom: 0;
}


/* arrow from start means the arrow will start from the very start */
.dzstooltip.arrow-from-start{
  left:-10px;
}
.dzstooltip.arrow-from-start.arrow-bottom:before{
  left:10px;
}

$transition-property: opacity,visibility, z-index,transform;
$transition-duration: 0.3s;
$transition-timing: ease-out;
.dzstooltip.transition-slidein{
  transform: translate3d(0,-5px,0);
  -webkit-transform: translate3d(0,-5px,0);
  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}
.dzstooltip.width-auto{
  width: auto;
}

.dzstooltip.arrow-bottom:before{
  content: "";
  position: absolute;;
  top: 100%;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;

  border-top: 7px solid $color_bg;
}

/* - aux padder */
.dzstooltip.arrow-bottom:after, .dzstooltip.arrow-top:after, .dzstooltip.arrow-bottom:after, .dzstooltip.arrow-bottom:after{
  content: "";
  position: absolute;;
  top: 100%;
  left: 10px;
  width: 50px;
  height: 10px;

}



.dzstooltip.arrow-left{
  top: 0%;
  bottom: auto;
  left:100%;
  margin-left: 10px;
  margin-bottom: 0;
}

.dzstooltip.arrow-left:before{
  content: "";
  position: absolute;;
  bottom: auto; top: 10px;
  left: auto;
  right: 100%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid $color_bg;

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}


.dzstooltip.arrow-right{
  top: 0%;
  bottom: auto;
  left:auto;
  right: 100%;
  margin-left: -10px;
  margin-bottom: 0;
}

.dzstooltip.arrow-right:before{
  content: "";
  position: absolute;;
  bottom: auto; top: 10px;
  left: 100%;
  right: auto;
  width: 0;
  height: 0;
  border-left: 7px solid $color_bg;
  border-right: 7px solid transparent;

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}




.dzstooltip.arrow-top:before{
  content: "";
  position: absolute;;
  bottom: 100%; top: auto;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;

  border-bottom: 7px solid $color_bg;
}


/* -- set throught javascript */
.dzstooltip.align-center.arrow-left:before,.dzstooltip.align-center.arrow-right:before{
  top: 50%;
  margin-top: 0px;
}

.dzstooltip.align-center.arrow-bottom:before,.dzstooltip.align-center.arrow-top:before{
  left: 50%;
  margin-left: -4px;
}

/* - aux padder */
.dzstooltip.align-center.arrow-bottom:after{
  left: 50%;
  margin-left: -25px;

}





.dzstooltip.align-right{

  left:auto;
  right: 100%;
  right: calc(100% + 15px);
}


.dzstooltip.align-bottom{
  top: auto; bottom:-15px;
}
.dzstooltip.align-bottom:before{
  top: auto; bottom:10px;
}


.dzstooltip.align-right.arrow-bottom:before,.dzstooltip.align-right.arrow-top:before{
  left: auto;
  right: 8px;
  margin-left: 0;
}

/* - aux padder */
.dzstooltip.align-right.arrow-bottom:after,.dzstooltip.align-right.arrow-top:after{
  left: 100%;
  margin-left: -25px;

}


.dzstooltip.no-arrow:before{
  display: none;
}

.dzstooltip-con:not(.for-click):hover > .dzstooltip, .dzstooltip.active{
    visibility: visible;
    opacity: 1;

    z-index: 53;
}



.dzstooltip.skin-black{
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #eeeeee;
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
.dzstooltip.skin-white{
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #111111;
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
.dzstooltip.skin-whiteheading{
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #111111;
  font-size: 0.9rem;
  line-height: 1.5rem;
  padding: 15px;

  .tooltip-heading{
    background-color: #cb1919;
    display: block;

    color: #fff;

    margin-left: -15px;
    margin-right: -15px;
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 15px;
  }
  .tooltip-heading:first-child{
    margin-top: -15px;
  }
}

$color_bg: rgba(255,255,255,0.9);
$color_bg: #eee;
.dzstooltip.skin-whiteheading.arrow-top:before{
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;

  border-bottom: 15px solid $color_bg;
}
.dzstooltip.skin-whiteheading.arrow-left{
  margin-left: 15px;
}
.dzstooltip.skin-whiteheading.arrow-right{
  margin-right: 15px;
}
.dzstooltip.skin-whiteheading.arrow-left:before{
  border-left: 10px solid transparent;
  border-right: 10px solid $color_bg;

  border-top : 10px solid transparent;
  border-bottom: 10px solid transparent;

  margin-top: -5px;
}
.dzstooltip.skin-whiteheading.arrow-right:before{
  border-left: 10px solid $color_bg;
  border-right: 10px solid transparent;

  border-top : 10px solid transparent;
  border-bottom: 10px solid transparent;

  margin-top: -5px;
}