[bug] Tooltips appear incorrectly unless Bootstrap is included

afl5c commented 6 years ago

Expected Behaviour

Tooltips appear with triangle below.

Actual Behaviour

Tooltips do not appear with triangle below.

Steps to Reproduce:

Try the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Frappe Charts Tooltip Bug</title>
    <script src="https://frappe.github.io/charts/assets/js/frappe-charts.min.js"></script>
    <!--link rel="stylesheet" type="text/css" href="https://frappe.github.io/charts/assets/css/bootstrap.min.css" media="screen"-->
</head>
<body>

    <div></div>

    <script>
var data = {
    labels: [ 'A', 'B', 'C' ],
    datasets: [{
        title: 'asdf',
        values: [ 1, 2, 3 ]
    }]
};

var chart = new Chart({
    parent: 'div',
    title: 'Test Chart',
    data: data,
    type: 'bar',
    height: 250
});

    </script>
</body>
</html>

And you will see:
Notice that the triangle does not appear properly below the tooltip.
Now comment in the boostrap CSS include in above code
Then you will see:
Notice how the triangle appears properly below the tooltip

This is a bug because Frappe Charts is supposed to have no dependencies.

Frappé Charts version: 0.0.5

afl5c commented 6 years ago

This seems to fix the issue:

<style>
.graph-svg-tip, .graph-svg-tip * {
    box-sizing: border-box;
}
</style>

pratu16x7 commented 6 years ago

@afl5c This'd make a fantastic PR :)

frappe / charts

[bug] Tooltips appear incorrectly unless Bootstrap is included #73

Expected Behaviour

Actual Behaviour

Steps to Reproduce: