2

Has anyone had any joy in adding tooltips to the full calendar V4 when locker service is enabled on Salesforce? You cannot use a 3rd party library as a proxy is returned instead of the element, so the eventRender documented method will not work.

eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
  title: info.event.extendedProps.description,
  placement: 'top',
  trigger: 'hover',
  container: 'body'
});

}

I have tried using the standard Salesforce helptext classes, but still with no joy. I've tried setting the popover classes on the eventMouseEnter and eventRender but I constantly encounter the same message 'Cannot read property 'getElement' of undefined'

eventMouseEnter: function(info){
           var tooltip = '<div aura:id="eleID" id="eventTooltip" class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" style="position:absolute;top:-4px;left:35px">' +  
                '<div class="slds-popover__body">' + info.event.title + '</div>' +
                '</div>';
            console.log('Mouse entered = ' + info.event.title);
            **//Failing on the below line, with 'Cannot read property 'getElement' of 
            undefined**
            var myElement = component.find('eleID').getElement();
            console.log('My Element', myElement);
            info.el.setAttribute("aria-describedby","eventTooltip");
            info.el.parentNode.innerHTML += tooltipHtml;    
        }

Does anyone have any suggestions? Many thanks

Roxy521
  • 71
  • 5

1 Answers1

0

I was able to add tooltip using the following in LWC:

  eventMouseEnter: function(info){
            
                var tooltipContainer=document.createElement("div");
                tooltipContainer.setAttribute("id", "eventTooltip");
                tooltipContainer.setAttribute("role", "tooltip");
                tooltipContainer.setAttribute("class", "slds-popover slds-popover_tooltip slds-nubbin_left");
                tooltipContainer.setAttribute("style", "position:absolute;top:0;width:320px;left:120px;");
                        

                var tooltipBody=document.createElement("div");
                tooltipBody.innerHTML=info.event.extendedProps.tooltip;
                tooltipBody.setAttribute("class", "slds-popover__body");
                tooltipContainer.appendChild(tooltipBody);
                info.el.setAttribute("aria-describedby","eventTooltip");
                info.el.parentNode.appendChild(tooltipContainer);   

                //defaulting the tooltip to be visible for 5 seconds at maximum
                setTimeout(function() {
                    let tooltip=document.getElementById("eventTooltip");
                    info.el.parentNode.removeChild(tooltip);    
                }, 5000);
            }
        },
        eventMouseLeave: function(info){
            var tooltip=document.getElementById("eventTooltip");
            info.el.parentNode.removeChild(tooltip);    
        },
Aditya
  • 1