Chart.js: Can not get caret to show with custom tooltips or change tooltips position

Created on 12 Jul 2019 · 4Comments · Source: chartjs/Chart.js

First off want to say that I love chart.js and it has great documentation. The only problems I have had so far is trying to figure out how to get the caret for the tooltips to show when using custom tooltips and also being able to change the position of the tooltips area. When using caret size and other related things to the caret I can never get a change.

support

Source

dstearle

👀1

Most helpful comment

try this

.bottom:after {
bottom: 100%;
left: 17px;
border: solid #e20074;
content: " ";
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 12px;
margin-left: -15px;
}

for custom caret css you can get from here . http://www.cssarrowplease.com/

GaddamRajuReddy on 11 Aug 2019

👍2 🎉1

All 4 comments

try this

for custom caret css you can get from here . http://www.cssarrowplease.com/

GaddamRajuReddy on 11 Aug 2019

👍2 🎉1

The above solution is correct. The caret settings wont apply with a custom tooltip since it is all HTML so you'll need to style your HTML div accordingly to get the arrow.