I am currently in the process of creating a Bootstrap 4 and HTML5 dashboard. My goal is to have each card on display flip to reveal additional information when the 'i' button is hovered over.
Although I have managed to get the flipping animation to work, there are a few issues that I seem to be facing:
- The additional info is not being displayed on the flip (it only flips the initial view)
- There seems to be a displacement of the card to the left when it is flipped
You can view the current state by checking out this fiddle with my existing HTML and CSS code.
// Values for x-axis labels
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
// Data points for drawing lines
var exampleChart = [0, 114, 106, 106, 107, 111, 133, 221, 783, 2478, 2485, 654];
var ext = document.getElementById("exampleChart");
var exampleChart = new Chart(ext, {
type: 'line',
data: {
labels: month,
datasets: [
{
data: exampleChart,
borderColor: "#155724",
pointBackgroundColor: '#155724',
pointBorderWidth: '0',
pointRadius: '4'
}
]
},
options: {
scales: {
yAxes: [
{
gridLines: {
display: false
},
ticks: {
display: false
}
}
],
xAxes: [
{
gridLines: {
display: false
},
ticks: {
display: false
}
}
]
},
legend: {
display: false
},
tooltips: {
callbacks: {
title: function () { }
}
},
layout: {
padding: {
left: 0,
right: 10,
top: 5,
bottom: 0
}
}
}
});
If possible, I would like to avoid using jQuery. However, if necessary, I would like a dissolve effect on the top card and for it to reappear smoothly when moved away from.
Just to clarify, I want the flipping action to occur only when hovering over the 'i' icon.