I’m not sure if this is feedback or if I should post this in themes. Either way I would like to make a suggestion per an issue the client had with tooltips popups when hovering calls, meetings, etc in calendar. Qtip positions the popup directly over the hovered element, which can block hovering over elements existing above, as well as be partially clipped by the fixed navbar on the top of the page.
In the interest of time, I quickly added some css to various files to circumvent the issues the clients were having.
First, I edited include/javascript/qtip/jquery.qtip.min.css directly with the following:
.qtip{
left: 2% !important;
top: 60% !important;
transform: translate(0%,-50%) !important;
}
I’m not 100% sure the overrides (!important) are necessary for the transform, but I’m certain they are necessary for left and top.
The result can be seen in the red rectangle:
The client was able to navigate the calendar freely and view details about that calls, meeting, etc.
Additionally, elements (containing 20 or more items) that are clicked like this:
present a popup that is clipped by the top navbar. I modified the .fc-popover class in modules/Calendar/fullcalendar/fullcalendar.css with the following:
.fc-popover {
position: absolute;
left: 50%;
top: 100px;
transform: translate(-50%, 100px);
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
Again, the transform may not even be necessary for the desired outcome. However, this modification does place large popups below the 90px navbar at the top of the page.
The result can be seen in the dark green rectangle:
Not sure if this will help the SuiteCRM community or anyone who is looking for a fix, but this worked for us.
Blessings and all the best!
- J