Chardin limitations

Test cases for chardin js

by allisonstrandberg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chardin.js/0.1.3/chardinjs.min.js"></script>
<!DOCTYPE html>
<html>

<body>

<button class="chardinjs-button" type="button">
  Show coach marks
</button>

<div class="div-container">

<div class="first-parent parent-div">
  <div class="first-child child-div" data-intro="The element is highlighted.">
    This is the default case of a child div within a parent div: position and z-index are the defaults.
  </div>
</div>

<div class="second-parent parent-div">
  <div class="second-child child-div" data-intro="The element isn't highlighted.">
    The parent element has an explicit z-index.
  </div>
</div>

<div class="third-parent parent-div">
  <div class="third-child child-div" data-intro="The element isn't highlighted.">
    The child element has an explicit z-index.
  </div>
</div>

<div class="fourth-parent parent-div">
  <div class="fourth-child child-div" data-intro="The element is highlighted.">
    The parent element has position: absolute.
  </div>
</div>

<div class="fifth-parent parent-div">
  <div class="fifth-child child-div" data-intro="The element isn't highlighted, and the coach mark scrolls relative to the element.">
    The parent element has position: fixed.
  </div>
</div>

</div>

</body>
</html>

CSS

.chardinjs-overlay {
  position: absolute;
  z-index: 9999990;
  background-color: #000;
  opacity: 0.8;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

.chardinjs-helper-layer {
  position: absolute;
  z-index: 9999998;
  color: white;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }
  .chardinjs-helper-layer.chardinjs-left {
    border-left: solid 1px;
    margin-left: -10px; }
  .chardinjs-helper-layer.chardinjs-right {
    border-right: solid 1px;
    padding-right: 10px; }
  .chardinjs-helper-layer.chardinjs-bottom {
    border-bottom: solid 1px;
    padding-bottom: 10px; }
  .chardinjs-helper-layer.chardinjs-top {
    border-top: solid 1px;
    padding-top: 10px; }

.chardinjs-tooltip {
  position: absolute;
  -webkit-transition: opacity 0.1s ease-out;
  -moz-transition: opacity 0.1s ease-out;
  -ms-transition: opacity 0.1s ease-out;
  -o-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
  max-width: 200px; }
  .chardinjs-tooltip.chardinjs-left {
    margin-left: -75px;
    padding-right: 10px; }
  .chardinjs-tooltip.chardinjs-right {
    margin-right: -75px;
    padding-left: 10px; }
  .chardinjs-tooltip.chardinjs-bottom {
    margin-bottom: -30px;
    padding-top: 10px; }
  .chardinjs-tooltip.chardinjs-top {
    margin-top: -30px;
    padding-bottom: 10px; }
  .chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after, .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
    content: ".";
    display: inline-block;
    background-color: white;
    height: 1px;
    overflow: hidden;
    position: absolute; }
  .chardinjs-tooltip.chardinjs-right:before,...

JavaScript

$('body').chardinJs();
$('body').on('click', '.chardinjs-button', function (e) {
    e.preventDefault();
    return ($('body').data('chardinJs')).toggle();
});