Hover Frama Widget

[olafvandinter2]

Hi All, I have been working on a widget that is a hover frame that is only shown/created when the mouse is on a certain frame.

It can be initialized on all 4 sides of the main frame and tracks the mouse.

Thinks that could be improved:
Being able to add widget to the Hover Frame from the "App" class instead of adding them in the "ToplevelWindow".
Adding more arguments to make it more adaptable.

import customtkinter as ctk

ctk.set_appearance_mode("Dark")  # Modes: "System" (standard), "Dark", "Light"
ctk.set_default_color_theme("blue")  # Themes: "blue" (standard), "green", "dark-blue"


class App(ctk.CTk):
    def __init__(self):
        super().__init__()

        # configure window
        self.title("Hover Frame Example")
        self.geometry(f"{1100}x{580}")

        self.frame = ctk.CTkFrame(master=self)
        self.frame.pack(padx=5, pady=5, fill='x', expand=False)

        self.hover_frame = HoverFrame(master=self.frame, side='bottom', height_master=40,
                                      height_hover=300, width_hover=300)




if __name__ == "__main__":
    app = App()
    app.mainloop()

import customtkinter as ctk

from collections import defaultdict

ctk.set_appearance_mode("Dark")
ctk.set_default_color_theme("blue")


class ToplevelWindow(ctk.CTkToplevel):
    def __init__(self,
                 side: str,
                 x_spawn: int,
                 y_spawn: int,
                 width_frame: int,
                 height_frame: int,
                 *args,
                 **kwargs):
        super().__init__(*args,
                         **kwargs)

        self.side = side
        self.x = x_spawn
        self.y = y_spawn
        self.width = width_frame
        self.height = height_frame

        self.attributes('-topmost', True)
        self.update_position_toplevel(x=self.x, y=self.y)
        self.overrideredirect(1)
        self.frame_hover_level = ctk.CTkFrame(master=self)
        self.frame_hover_level.pack(padx=0, pady=0, fill="both", expand=True, side='top')
        self.frame_hover_level.update()

        self.dict_of_duts = defaultdict()
        self.dict_of_values = defaultdict()

        self._parent_frame = ctk.CTkScrollableFrame(master=self.frame_hover_level, border_width=2)
        self._parent_frame.pack(padx=(0, 0), pady=0, fill="both", expand=True, side='top')
        self._parent_frame.grid_columnconfigure([0], weight=1)
        self._parent_frame.grid_rowconfigure([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], weight=1)

    def add_widgets(self):
        label = ctk.CTkLabel(master=self._parent_frame, text="Hello, HoverFrame!")
        label.pack()

        button = ctk.CTkButton(master=self._parent_frame, text="Click Me!")
        button.pack()

    def return_state(self):
        return self._parent_frame

    def update_position_toplevel(self, x, y):
        self.geometry(f"{self.width}x{self.height}+{x}+{y}")


class HoverFrame(ctk.CTkFrame):
    def __init__(self,
                 master: any,
                 side: str = 'bottom',
                 padx: int = 0,
                 pady: int = 0,
                 height_master: int = 100,
                 width_master: int = 100,
                 height_hover: int = 100,
                 width_hover: int = 100,
                 *args,
                 **kwargs):
        super().__init__(master, padx, pady, *args, **kwargs)

        self.hover_frame = None
        self.height_frame_master = height_master
        self.width_frame_master = width_master
        self.height_frame_hover = height_hover
        self.width_frame_hover = width_hover
        self.master = master
        self.side = side
        self.padx = padx
        self.pady = pady
        self.create_frame_hover = ctk.CTkFrame(master=self.master, height=self.height_frame_master, width=self.width_frame_master, border_width=0)
        self.create_frame_hover.pack(padx=self.padx, pady=self.pady, fill="x", expand=False, side='top')
        self.create_frame_hover.bind(sequence='<Enter>', command=self.create_hover_frame)
        self.create_frame_hover.bind(sequence='<Leave>', command=self.destroy_hover_frame)
        self.create_frame_hover.bind(sequence='<Motion>', command=self.update_position_hover_frame)

    def update_position_hover_frame(self, event):
        try:
            if self.side in ['bottom', 'top']:
                mouse_pos_x = self.winfo_pointerx()
                x_pos_min = int(mouse_pos_x - self.width_frame_hover / 2)
                x_pos_max = int(mouse_pos_x + self.width_frame_hover / 2)
                x_max = self.create_frame_hover.winfo_rootx() + self.create_frame_hover.winfo_width()

                if x_pos_max > x_max:
                    correction = x_max - x_pos_max
                    self.hover_frame.update_position_toplevel(x=x_pos_min + correction, y=self.y)
                elif x_pos_min < self.create_frame_hover.winfo_rootx():
                    correction = x_pos_min - self.create_frame_hover.winfo_rootx()
                    self.hover_frame.update_position_toplevel(x=x_pos_min - correction, y=self.y)
                else:
                    self.hover_frame.update_position_toplevel(x=x_pos_min, y=self.y)

            elif self.side in ['right', 'left']:
                mouse_pos_y = self.winfo_pointery()
                y_pos_min = int(mouse_pos_y - self.height_frame_hover / 2)
                y_pos_max = int(mouse_pos_y + self.height_frame_hover / 2)
                y_max = self.create_frame_hover.winfo_rooty() + self.create_frame_hover.winfo_height()

                if y_pos_max > y_max:
                    correction = y_max - y_pos_max
                    self.hover_frame.update_position_toplevel(x=self.x, y=y_pos_min + correction)
                elif y_pos_min < self.create_frame_hover.winfo_rooty():
                    correction = y_pos_min - self.create_frame_hover.winfo_rooty()
                    self.hover_frame.update_position_toplevel(x=self.x, y=y_pos_min - correction)
                else:
                    self.hover_frame.update_position_toplevel(x=self.x, y=y_pos_min)

        except:
            print("Window does not exist")

    def calculate_x_y(self, pointer_pos, pos_min, pos_max, max_value, side_correction):
        if pos_max > max_value:
            correction = max_value - pos_max
            size_correct = side_correction / 2
        elif pos_min < self.create_frame_hover.winfo_rootx():
            correction = pos_min - self.create_frame_hover.winfo_rootx()
            size_correct = -side_correction / 2
        else:
            correction = 0
            size_correct = side_correction / 2
        return pointer_pos - size_correct + correction

    def create_hover_frame(self, event):
        if self.hover_frame:
            return

        if self.side in ['bottom', 'top']:
            mouse_pos_x = self.winfo_pointerx()
            x_pos_min = int(mouse_pos_x - self.width_frame_hover / 2)
            x_pos_max = int(mouse_pos_x + self.width_frame_hover / 2)
            x_max = self.create_frame_hover.winfo_rootx() + self.create_frame_hover.winfo_width()
            self.x = self.calculate_x_y(mouse_pos_x, x_pos_min, x_pos_max, x_max, self.width_frame_hover)

            if self.side == 'bottom':
                self.y = self.create_frame_hover.winfo_rooty() + self.create_frame_hover.winfo_height() - 5
            if self.side == 'top':
                self.y = self.create_frame_hover.winfo_rooty() - self.height_frame_master + 5

        elif self.side in ['right', 'left']:
            mouse_pos_y = self.winfo_pointery()
            y_pos_min = int(mouse_pos_y - self.height_frame_hover / 2)
            y_pos_max = int(mouse_pos_y + self.height_frame_hover / 2)
            y_max = self.create_frame_hover.winfo_rooty() + self.create_frame_hover.winfo_height()
            self.y = self.calculate_x_y(mouse_pos_y, y_pos_min, y_pos_max, y_max, self.height_frame_hover)

            if self.side == 'right':
                self.x = self.create_frame_hover.winfo_rootx() + self.create_frame_hover.winfo_width() - 5
            if self.side == 'left':
                self.x = self.create_frame_hover.winfo_rootx() - self.width_frame_master + 5

        self.hover_frame = ToplevelWindow(x_spawn=int(self.x), y_spawn=int(self.y), width_frame=self.width_frame_hover,
                                          height_frame=self.height_frame_hover, side=self.side)
        self.hover_frame.bind('<Leave>', self.destroy_hover_frame_reverse)
        self.hover_frame.add_widgets()

    def destroy_hover_frame(self, event):
        def check_destroy():
            if self.hover_frame is not None:
                x, y, x_hover, y_hover = self.winfo_pointerx(), self.winfo_pointery(), self.hover_frame.winfo_rootx(), self.hover_frame.winfo_rooty()
                width_hover, height_hover = self.hover_frame.winfo_width(), self.hover_frame.winfo_height()

                if self.side == 'right' and (x <= x_hover or y <= y_hover or y >= y_hover + height_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None
                elif self.side == 'left' and (
                        x >= x_hover + width_hover or y <= y_hover or y >= y_hover + height_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None
                elif self.side == 'bottom' and (y <= y_hover or x <= x_hover or x >= x_hover + width_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None
                elif self.side == 'top' and (y >= y_hover + height_hover or x <= x_hover or x >= x_hover + width_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None

        self.after(100, check_destroy)

    def destroy_hover_frame_reverse(self, event):
        def check_destroy():
            if self.hover_frame is not None:
                x, y, x_hover, y_hover = self.winfo_pointerx(), self.winfo_pointery(), self.hover_frame.winfo_rootx(), self.hover_frame.winfo_rooty()
                width_hover, height_hover = self.hover_frame.winfo_width(), self.hover_frame.winfo_height()

                # Check if the cursor is outside the hover frame, except for the side adjacent to the main frame
                if self.side == 'right' and (x >= x_hover + width_hover or y <= y_hover or y >= y_hover + height_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None
                elif self.side == 'left' and (x <= x_hover or y <= y_hover or y >= y_hover + height_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None
                elif self.side == 'bottom' and (
                        x <= x_hover or x >= x_hover + width_hover or y >= y_hover + height_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None
                elif self.side == 'top' and (x <= x_hover or x >= x_hover + width_hover or y <= y_hover):
                    self.hover_frame.destroy()
                    self.hover_frame = None

        self.after(100, check_destroy)