Display custom tooltip on areas

Do you use the DayPilot.Bubble object to display the tooltip?

The Scheduler doesn't use any z-index but you might want to check its parent elements.

The bubble is displayed using a <div> that is inserted as the last child of document body. It uses z-index: 10. You can change the z-index it using DayPilot.Bubble.zIndex property:
https://api.daypilot.org/daypilot-bubble-zindex/

var bubble = new DayPilot.Bubble({
  zIndex: 10000
});

Thx for your answer! Can I just use Bubble on html object in area? What I need is tooltip only onhover on that element:

<i class='mdi mdi-flask-outline'></i>

The code:

"areas": [	   
  {
    "bottom": "0",
    "html": "<div class='simptip-position-top simptip-multiline' data-tooltip='Tooltips content'><i class='mdi mdi-flask-outline'></i></div>",
    "top": "20",
    "visibility": "Hover",	            
    "css": "event_paski",
    "start": "2020-12-11T17:45:00",
    "end": "2020-12-11T18:45:00"								
  }
]

The active area (the whole area) will display the event bubble on hover if you specify action: "Bubble". You can override the event bubble object using bubble property:

"areas": [	   
  {
    action: "Bubble",
    bubble: new DayPilot.Bubble(...),
    "bottom": "0",
    "html": "<div class='simptip-position-top simptip-multiline' data-tooltip='Tooltips content'><i class='mdi mdi-flask-outline'></i></div>",
    "top": "20",
    "visibility": "Hover",	            
    "css": "event_paski",
    "start": "2020-12-11T17:45:00",
    "end": "2020-12-11T18:45:00"								
  }
]

If you only want to display the bubble for the <i> element you will have to move it to another active area. Areas can be overlapping and they use the default stacking so areas that you specify later will be displayed on top (unless you add custom z-index).

"areas": [	   {
			
	"action": "Bubble",
	"bubble": "new DayPilot.Bubble({html: 'XX'});",
	 "bottom": "0",
	"html": "<i class='mdi mdi-flask-outline'></i>",
	"top": "20",
	"visibility": "Hover",	            
	"css": "event_passki",
	"start": "2020-12-11T17:45:00",
	"end": "2020-12-11T18:45:00"								
				}
		]

The bubble value can't be a string, it must be a DayPilot.Bubble object. You can't define in directly in the JSON response - you'll need to add the bubble in the onBeforeEventRender event handler.

I'd recommend moving the whole logic that adds the active areas to onBeforeEventRender - it will be more efficient than sending the generated data over the network.

Hmmm it could be a problem because I need to refresh the timeline and events after users clicks and edits without refreshing page. Can I handle that without JSON?

The onBeforeEventRender is fired for every event. You don't need to change anything in your current logic. It will be fired if you reload the events using events.load() as well.

See also:
https://doc.daypilot.org/scheduler/event-customization/
https://api.daypilot.org/daypilot-scheduler-onbeforeeventrender/