tooltip position top will be in a strange position

ChiaYuSu commented 1 year ago

The position of the tooltip is in a strange position if it is set to top, but it is normal if it is set to right.

top
right

wa0x6e commented 1 year ago

I would need a sample HTML code to reproduce the issue

ChiaYuSu commented 1 year ago

Thank you for your reply. Here is an sample code.

function formatDate(date) {
    let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    let d = new Date(date),
        month = '' + (monthNames[d.getMonth()]),
        day = '' + d.getDate(),
        year = d.getFullYear();
    if (day.length < 2)
        day = '0' + day;
    return month + ' ' + day + ', ' + year;
}

let data = [
    { date: '2023-02-01', value: 327, info: 'test' },
    { date: '2023-02-02', value: 98 },
    { date: '2023-02-03', value: 74 },
    { date: '2023-02-04', value: 115 },
];

const cal = new CalHeatmap();
cal.paint({
    data: { source: data, x: 'date', y: 'value' },
    range: 12,
    date: {
        start: '2023-01-01',
        timezone: 'Asia/Taipei',
    },
    domain: {
        type: 'month',
        subLabel: {
            width: 30,
            textAlign: 'start',
            text: () => dayjs.weekdaysShort(true).map((d, i) => i % 2 == 0 ? '' : d),
        },
    },
    subDomain: {
        type: 'day',
        radius: 2,
        height: 15,
        width: 15,
    },
    itemSelector: '#cal-heatmap',
    scale: {
        range: ['#CAC1BB', '#B1A39A', '#97867B', '#7E6A5D', '#664F40'],
    },
},
    [
        [Tooltip,
            {
                text: (d) => formatDate(d),
                placement: 'top',
                strategy: 'absolute',
            }
        ],
        [
            Legend
        ]
    ],
);

I wonder if the conflict is caused by my use of the bootstrap plugin.

wa0x6e commented 1 year ago

I need the HTML code, which is the one causing the issue.

The tooltip library is the same used by bootstrap, issue will be coming from the HTML code

ChiaYuSu commented 1 year ago

Ok. The html code is below.

<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <!-- Heatmap -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/zh-tw.js"></script>
    <script src="https://unpkg.com/cal-heatmap@4.0.0-beta.5/dist/cal-heatmap.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/cal-heatmap@4.0.0-beta.5/dist/cal-heatmap.css"></script>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/cal-heatmap@4.0.0-beta.5/dist/plugins/Tooltip.min.js"></script>
    <script src="https://unpkg.com/cal-heatmap@4.0.0-beta.5/dist/plugins/Legend.min.js"></script>
    <!-- datatables -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.11.3/af-2.3.7/b-2.1.1/b-colvis-2.1.1/b-html5-2.1.1/b-print-2.1.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/sr-1.0.1/datatables.min.css" />
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.11.3/af-2.3.7/b-2.1.1/b-colvis-2.1.1/b-html5-2.1.1/b-print-2.1.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/sr-1.0.1/datatables.min.js"></script>
</head>

<body>
    <div class="col-sm-12 col-lg-10">
        <div id="cal-heatmap"></div>
    </div>
</body>

wa0x6e commented 1 year ago

I tried to reproduce here: https://jsfiddle.net/yd9pu26s/

There is no issue, I need the rest of your HTML code, in order to reproduce the issue, unless your page is online, and I can take a look?

ChiaYuSu commented 1 year ago

Thank you for your help, I will debug it myself first If it really still doesn't work, I'll post the link for you.

wa0x6e commented 1 year ago

Usually, it's a matter of display: block|none|inline / position: relative|absolute etc.. in your css, for the containing tag

ChiaYuSu commented 1 year ago

Ok, thank you, I will check it by myself first.

wa0x6e / cal-heatmap

tooltip position top will be in a strange position #312