diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index 403c46bbd3ef974e7f82129ab65d9d40ca7b030b..bebd17df7ae18b087274119dad0c291b0f32e6c4 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -144,11 +144,50 @@
                             }]
                         },
                         tooltips: {
-                            callbacks: {
-                                label: function(tooltipItem, data) {
-                                    var dataItem = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
-                                    return "compound " + dataItem.id + " on PPI family " + dataItem.family_name;
+                            enabled: false,
+                            mode: 'point',
+                            custom: function(tooltipModel) {
+                                // Tooltip Element
+                                var tooltipEl = document.getElementById('chartjs-tooltip');
+                                // Create element on first render
+                                if (!tooltipEl) {
+                                    tooltipEl = document.createElement('div');
+                                    tooltipEl.id = 'chartjs-tooltip';
+                                    document.body.appendChild(tooltipEl);
                                 }
+                                var data = this._data;
+                                var props;
+                                if (tooltipModel.dataPoints && tooltipModel.dataPoints.length > 0) {
+                                    tooltipModel.dataPoints.forEach(function(dataPoint) {
+                                        var dataItem = data.datasets[dataPoint.datasetIndex].data[dataPoint.index];
+                                        props = {'id':dataItem.id, 'family': dataItem.family_name, 'smiles': dataItem.smiles};
+                                    });
+                                    var canvasStr = '<canvas id="canvas-'+ props.id +'" width="250" height="250" data-smiles="' + props.smiles + '"></canvas>'
+                                    var tooltipStr = '<div class="card" style="width:250">' + canvasStr
+                                                    + '<div class="card-body"><h5 class="card-title">Compound ' + props.id  + '</h5>'
+                                                    + '<p class="card-text">PPI Family: ' + props.family + '</p></div></div>';
+                                    tooltipEl.innerHTML = tooltipStr;
+                                }
+                                // Hide if no tooltip
+                                if (tooltipModel.opacity === 0) {
+                                    tooltipEl.style.opacity = 0;
+                                    return;
+                                }
+                                // Set caret Position
+                                tooltipEl.classList.remove('above', 'below', 'no-transform');
+                                if (tooltipModel.yAlign) {
+                                    tooltipEl.classList.add(tooltipModel.yAlign);
+                                } else {
+                                    tooltipEl.classList.add('no-transform');
+                                }
+                                // `this` will be the overall tooltip
+                                var position = this._chart.canvas.getBoundingClientRect();
+                                // Display, position, and set styles for font
+                                tooltipEl.style.opacity = 1;
+                                tooltipEl.style.position = 'absolute';
+                                tooltipEl.style.left = position.left + window.scrollX + tooltipModel.caretX + 'px';
+                                tooltipEl.style.top = position.top + window.scrollY + tooltipModel.caretY + 'px';
+                                drawSmiles();
                             }
                         }
                     }