工具提示显示在顶部，而不会影响容器的高度和宽度

Question

单击图像后，数字将显示为tooltip消息4秒钟，然后消失。这正在按预期方式工作。但是在显示工具提示时，div的高度和宽度被更改了。我们如何在图像顶部显示工具提示而不影响grid-container

的高度/宽度

我已经在此处添加了一个演示：

https://codesandbox.io/s/amazing-ellis-2h3pd?file=/src/components/Home.js

Answer 1

第一个解决方案

您可以设置### Import libaries import requests import pyodbc import tkinter as tk from tkinter import * from tkinter import messagebox, ttk ### Set global fonts TITLE_FONT = ("Verdana", 12) ### Define the applicaiton class class APP (Frame): ### Build the init function to create the container and windows def __init__ (self, master=None ): Frame.__init__(self, master) self.grid() # Set the application window title self.master.title("Playing Around with Classes") # set the size of the row height for the application self.master.rowconfigure(0, weight=1) self.master.rowconfigure(1, weight=35) self.master.rowconfigure(2, weight=1) self.master.rowconfigure(3, weight=1) #Row 0 - Title area label = tk.Label(master, text="Playing Around with Classes", font=TITLE_FONT) label.grid(row=0, columnspan=3, sticky="nsew") # Main presentation are Frame2 = Frame(master, bg="#263D42") Frame2.grid(row = 1, column = 0, rowspan = 1, columnspan = 3, sticky = "nsew") # List of pages self.frames = {} # i think this loop defines the class objects for F in (NetworkMap,AuthorPage,Dashboard): frame = F(Frame2, self) self.frames[F] = frame frame.grid(row=0, column=1, sticky="nsew") self.show_frame(Dashboard) ### Define the show_frame function that will bring the selected fram to the front so it can be viewed def show_frame(self, cont): frame = self.frames[cont] frame.tkraise() ### Create a class for the Dashboard page. This will also be the start page when the application starts class Dashboard (tk.Frame): def __init__(self, parent, controller): tk.Frame.__init__(self,parent, bg="#263D42") label = tk.Label(self, text="Text to change", font=TITLE_FONT, bg="#263D42", fg="white", pady = 20) label.grid(row=0, column=0, sticky="nsew") def update(self): self.allPapersLabel.config(text="Changed Text") ### Create a page to get the Author detasil class AuthorPage (tk.Frame): def __init__(self, parent, controller): tk.Frame.__init__(self,parent) label = tk.Label(self, text="Get Author", font=TITLE_FONT) label.grid(row=0, column=0, sticky="nsew") class NetworkMap (tk.Frame): def __init__(self, parent, controller): tk.Frame.__init__(self,parent) label = tk.Label(self, text="Network Map", font=TITLE_FONT) label.grid(row=0, column=0, sticky="nsew") def changeText(): Dashboard.update() changeText() root = tk.Tk() root.geometry("600x800+100+100") app = APP(master=root) app.mainloop() 并应用必要的边距，使其出现在图像顶部

position: absolute

第二个解决方案

重构jsx，使工具提示始终位于图像顶部，但带有{phoneTooltip === id && ( <div style={{position: 'absolute', marginLeft: '100px', zIndex: 1, marginTop: '-50px'}} className="tooltip_PhoneNumber_home" key={phonenumber}> {phonenumber} </div> )} ，visibility: hidden并单击操作使其可见。

opacity: 0