Our pure JavaScript Scheduler component


Post by tanmay.mishra.optym »

So, in my use case I need to display a tooltip on hovering over a line denoting time(current time).

How I'm denoting the line, is I've made a TimeSpanConfig object with duration as zero

const cTimeLine:Partial<TimeSpanConfig> =     {
      id: 99,
      startDate: new Date(currentTime),
      duration: 0,
      durationUnit: 'hour',
      cls: 'cLine',
    }

How I'm denoting the Tooltip,

  new Tooltip({
    forSelector: '.cLine',
    html: wrap(`${myAwesomeHTML}`),
    hoverDelay: 1,
  })

But it seems like the line gets behind the main chart area, modifiying the z-Index doesnt work, I've tried making it work by changing CSS properties like position and others, nothing worked. Any ideas on how I can get the tooltip on hovering over the line.


Post by johan.isaksson »

Hi,

If you are using the timeRanges feature for the lines, the CSS for it has pointer-events : none on the containing div (from the .b-sch-canvas rule). Which prevents mouse interactions. Override that in your apps CSS:

.cLine {
  pointer-events : all;
}
Best regards,
Johan Isaksson

Post by tanmay.mishra.optym »

Thank you!


Post Reply