Tooltips and charts


Step 1 - tooltips

Every UI we build should be as intuitive as possible. As developers, we have to remember, that the projects we create cannot be just art for art's sake.

In such complicated structures like Dashboard, we have to provide additional help to the user.That's the moment when Tooltips come into play.

Tooltips are little clouds with a brief text message, triggered by clicking on a specific element or hovering over it. They significantly enhance the User Experience, especially with advanced UI elements, which often require additional explanation.

In the second column of card-body place the following code:



<!--Summary-->
<p>Total sales:
    <strong>2000$</strong>
    <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Total sales in the given period">
        <i class="fa fa-question"></i>
    </button>
</p>
<p>Average sales:
    <strong>100$</strong>
    <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Average daily sales in the given period">
        <i class="fa fa-question"></i>
    </button>
</p>

    

Tooltips also have to be initialized. Below the previous initialization, paste this code:



// Tooltip Initialization
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

    

You can easily manipulate the tooltip via attributes.

By changing data-placement you can adjust the position.



data-placement="top"

    

    Available options are:

  • top
  • bottom
  • right
  • left

The title attribute holds a message of the tooltip.



title="Total sales in the given period"

    

To learn more about Tooltips have a look at our Tooltips documentation.

If you need to place more complex content within a Tooltip use Popovers instead.

Step 2 - minimalist chart

Charts are an essential component of any dashboard. It's now time to create our first chart.

In the second column of card-body, below Tooltips, place the following code:



<!--Change chart-->
<span class="min-chart my-4" id="chart-sales" data-percent="76">
    <span class="percent"></span>
</span>
<h5>
    <span class="badge green p-2">Change
        <i class="fa fa-arrow-circle-up ml-1"></i>
    </span>
    <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Percentage change compared to the same period in the past">
        <i class="fa fa-question"></i>
    </button>
</h5>

    

As you can see, we've set an id="chart-sales" to the chart. We'll refer to it very soon when we call the javascript function to initialize the chart.

We also set the value 76 to the data-percent attribute. This is the value which will be presented on the chart. You can set whatever number you want (between 0 - 100 of course).

Below is just a badge with a tooltip. We've already talked about that so there is nothing more to explain.

Now let's initialize the chart.

In the scripts section, below the initialization functions, open new <scirpt> tags and place this code:




// Minimalist chart
$(function () {
    $('.min-chart#chart-sales').easyPieChart({
        barColor: "#4caf50",
        onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

    

By manipulating this variable you can change the color of the chart. Just use any hexadecimal color you like.



barColor: "#4caf50",

    

Save the file and refresh the browser. The chart is now working!

Step 3 - line chart

As our main chart, we'll use a line chart. It's perfect for presenting a data change over time.

In the second column of the main panel place this code:



<!--Grid column-->
<div class="col-md-7">

    <!--Panel Header-->
    <div class="view view-cascade py-3 gradient-card-header info-color-dark mb-4">

        <canvas id="lineChart"></canvas>

    </div>
    <!--/Card image-->

</div>
<!--Grid column-->

    

Now we make a reference to this ID and initialize the line chart with the data and configuration we need.

In the scripts section, below the initialization of the minimalist chart, place the following code:



// Main chart
var ctxL = document.getElementById("lineChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "#fff",
backgroundColor: 'rgba(255, 255, 255, .3)',
borderColor: 'rgba(255, 255, 255)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
options: {
legend: {
labels: {
    fontColor: "#fff",
}
},
scales: {
xAxes: [{
    gridLines: {
        display: true,
        color: "rgba(255,255,255,.25)"
    },
    ticks: {
        fontColor: "#fff",
    },
}],
yAxes: [{
    display: true,
    gridLines: {
        display: true,
        color: "rgba(255,255,255,.25)"
    },
    ticks: {
        fontColor: "#fff",
    },
}],
}
}
});

    

data object allows you to manipulate the data. options allow you adjust the chart itself.

If you want to learn more about charts take a look at our Charts documentation.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits