search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Display custom tooltip on areas

Asked by Yacoo
4 months ago.

Tricky problem - I need to put icons on an event, and I'm making that with "areas" and that works perfect (thx for hover for date areas!:-) ). But then I need to show tooltip when there is hover on the icon - but the tooltip is always covered by DayPilot. z-index, position etc doesn't work. Any ideas?

Answer posted by Dan Letecky [DayPilot]
4 months ago.

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
});
Comment posted by Yacoo
4 months ago.

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"								
  }
]
Comment posted by Dan Letecky [DayPilot]
4 months ago.

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).

Comment posted by Yacoo
4 months ago.
Sounds great! But pls help (it doesn't work for me):
It's loaded by: dp.events.load("_URL_");
"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"								
				}
		]
Comment posted by Dan Letecky [DayPilot]
4 months ago.

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.

Comment posted by Yacoo
4 months ago.

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?

Comment posted by Dan Letecky [DayPilot]
4 months ago.

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/

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.