单击图像后,数字将显示为tooltip
消息4秒钟,然后消失。这正在按预期方式工作。但是在显示工具提示时,div
的高度和宽度被更改了。我们如何在图像顶部显示工具提示而不影响grid-container
我已经在此处添加了一个演示:
https://codesandbox.io/s/amazing-ellis-2h3pd?file=/src/components/Home.js
答案 0 :(得分: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