chartist-plugin-tooltip-infl

chartist-plugin-tooltip

Install

Adds a tool tip for chartist graphing library.

.ct-tooltip {
    position: absolute;
    display: inline-block;
    min-width: 5em;
    padding: 8px 10px;
    background: #383838;
    color: #fff;
    text-align: center;
    pointer-events: none;
    z-index: 100;
    transition: opacity .2s linear;

    // Arrow
    &:before {
        position: absolute;
        bottom: -14px;
        left: 50%;
        border: solid transparent;
        content: ' ';
        height: 0;
        width: 0;
        pointer-events: none;
        border-color: rgba(251, 249, 228, 0);
        border-top-color: #383838;
        border-width: 7px;
        margin-left: -8px;
    }

    &.hide {
        display: block;
        opacity: 0;
        visibility: hidden;
    }
}

Usage

new Chartist.Pie('.ct-chart', {
  series: [1,2,3,4,5]
}, {
  donut: true,
  donutWidth: 30,
  donutSolid: true,
  startAngle: 0,
  showLabel: false,
  plugins: [
    Chartist.plugins.tooltip({
      className : 'ct-tooltip'
    })
  ]
});