ಟೂಲ್‌ಟಿಪ್‌ಗಳು ನೀವು ಹೊಂದಿರುವ ಚಿಕ್ಕ UI ಸಮಸ್ಯೆಯಂತೆ ಭಾಸವಾಗುತ್ತದೆ. ಅವು ಚಿಕ್ಕದಾಗಿರುತ್ತವೆ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಮರೆಮಾಡಲಾಗಿದೆ. ಒಂದನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಎಂದು ಯಾರಾದರೂ ಕೇಳಿದಾಗ, ಸಾಂಪ್ರದಾಯಿಕ ಉತ್ತರವು ಯಾವಾಗಲೂ ಕೆಲವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಹಿಂತಿರುಗುತ್ತದೆ. ಮತ್ತು ದೀರ್ಘಕಾಲದವರೆಗೆ, ಇದು ಸಮಂಜಸವಾದ ಸಲಹೆಯಾಗಿದೆ. ನಾನು ಕೂಡ ಅದನ್ನು ಅನುಸರಿಸಿದೆ. ಮೇಲ್ಮೈಯಲ್ಲಿ, ಟೂಲ್ಟಿಪ್ ಸರಳವಾಗಿದೆ. ಒಂದು ಅಂಶದ ಮೇಲೆ ಸುಳಿದಾಡಿ ಅಥವಾ ಕೇಂದ್ರೀಕರಿಸಿ, ಕೆಲವು ಪಠ್ಯದೊಂದಿಗೆ ಸ್ವಲ್ಪ ಪೆಟ್ಟಿಗೆಯನ್ನು ತೋರಿಸಿ, ನಂತರ ಬಳಕೆದಾರರು ದೂರ ಹೋದಾಗ ಅದನ್ನು ಮರೆಮಾಡಿ. ಆದರೆ ಒಮ್ಮೆ ನೀವು ನೈಜ ಬಳಕೆದಾರರಿಗೆ ಒಂದನ್ನು ರವಾನಿಸಿದರೆ, ಅಂಚುಗಳು ತೋರಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ. ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರು ಟ್ರಿಗ್ಗರ್‌ಗೆ ಟ್ಯಾಬ್ ಮಾಡಿ, ಆದರೆ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಎಂದಿಗೂ ನೋಡಬೇಡಿ. ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಅದನ್ನು ಎರಡು ಬಾರಿ ಪ್ರಕಟಿಸುತ್ತಾರೆ ಅಥವಾ ಇಲ್ಲವೇ ಇಲ್ಲ. ನೀವು ಮೌಸ್ ಅನ್ನು ತುಂಬಾ ವೇಗವಾಗಿ ಚಲಿಸಿದಾಗ ಟೂಲ್ಟಿಪ್ ಮಿನುಗುತ್ತದೆ. ಇದು ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ. Esc ಒತ್ತಿದರೆ ಅದನ್ನು ಮುಚ್ಚುವುದಿಲ್ಲ. ಗಮನ ಕಳೆದುಹೋಗುತ್ತದೆ. ಕಾಲಾನಂತರದಲ್ಲಿ, ನನ್ನ ಟೂಲ್‌ಟಿಪ್ ಕೋಡ್ ನಾನು ಇನ್ನು ಮುಂದೆ ಸ್ವಂತವಾಗಿರಲು ಬಯಸುವುದಿಲ್ಲ ಎಂದು ಬೆಳೆಯಿತು. ಕಾರ್ಯಕ್ರಮ ಕೇಳುಗರು ಜಮಾಯಿಸಿದರು. ಹೋವರ್ ಮತ್ತು ಫೋಕಸ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ನಿರ್ವಹಿಸಬೇಕಾಗಿತ್ತು. ಹೊರಗಿನ ಕ್ಲಿಕ್‌ಗಳಿಗೆ ವಿಶೇಷ ಸಂದರ್ಭಗಳ ಅಗತ್ಯವಿದೆ. ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕೈಯಿಂದ ಸಿಂಕ್‌ನಲ್ಲಿ ಇರಿಸಬೇಕಾಗುತ್ತದೆ. ಪ್ರತಿ ಸಣ್ಣ ಫಿಕ್ಸ್ ತರ್ಕದ ಮತ್ತೊಂದು ಪದರವನ್ನು ಸೇರಿಸಿತು. ಗ್ರಂಥಾಲಯಗಳು ಸಹಾಯ ಮಾಡಿದವು, ಆದರೆ ಅವುಗಳು ತೆರೆಮರೆಯಲ್ಲಿ ಏನಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಬದಲು ನಾನು ಕೆಲಸ ಮಾಡಿದ ಕಪ್ಪು ಪೆಟ್ಟಿಗೆಗಳಂತೆಯೇ ಇದ್ದವು. ಅದೇ ನನ್ನನ್ನು ಹೊಸ Popover API ಅನ್ನು ನೋಡಲು ಪ್ರೇರೇಪಿಸಿತು. ಲೈಬ್ರರಿಯ ಸಹಾಯವಿಲ್ಲದೆ ಬ್ರೌಸರ್‌ನ ಸ್ಥಳೀಯ ಮಾದರಿಯನ್ನು ಬಳಸಿಕೊಂಡು ನಾನು ಒಂದೇ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಮರುನಿರ್ಮಿಸಿದರೆ ಏನಾಗುತ್ತದೆ ಎಂದು ನೋಡಲು ನಾನು ಬಯಸುತ್ತೇನೆ. ನಾವು ಪ್ರಾರಂಭಿಸಿದಾಗ, ಯಾವುದೇ ಹೊಸ ವೈಶಿಷ್ಟ್ಯದಂತೆ, ಅದರೊಂದಿಗೆ ಇನ್ನೂ ಕೆಲವು ವಿಷಯಗಳನ್ನು ಇಸ್ತ್ರಿ ಮಾಡಲಾಗುತ್ತಿದೆ ಎಂದು ಗಮನಿಸಬೇಕಾದ ಅಂಶವಾಗಿದೆ. ಒಟ್ಟಾರೆ API ಗೆ ಹಲವಾರು ತುಣುಕುಗಳು ಫ್ಲಕ್ಸ್‌ನಲ್ಲಿವೆಯಾದರೂ, ಇದು ಪ್ರಸ್ತುತ ಉತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಅದು ಹೇಳಿದೆ. ಈ ಮಧ್ಯೆ ಕ್ಯಾನಿಯಸ್ ಮೇಲೆ ಕಣ್ಣಿಡಲು ಯೋಗ್ಯವಾಗಿದೆ. "ಹಳೆಯ" ಟೂಲ್ಟಿಪ್ Popover API ಮೊದಲು, ಟೂಲ್‌ಟಿಪ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವುದು ಶಾರ್ಟ್‌ಕಟ್ ಆಗಿರಲಿಲ್ಲ. ಇದು ಡೀಫಾಲ್ಟ್ ಆಗಿತ್ತು. ಮೌಸ್, ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನದಾದ್ಯಂತ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಟೂಲ್‌ಟಿಪ್‌ನ ಸ್ಥಳೀಯ ಪರಿಕಲ್ಪನೆಯನ್ನು ಬ್ರೌಸರ್‌ಗಳು ಹೊಂದಿಲ್ಲ. ನೀವು ಸರಿಯಾಗಿರುವುದರ ಬಗ್ಗೆ ಕಾಳಜಿ ವಹಿಸಿದ್ದರೆ, ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವುದು ನಿಮ್ಮ ಏಕೈಕ ಆಯ್ಕೆಯಾಗಿದೆ ಮತ್ತು ನಾನು ಮಾಡಿದ್ದು ಅದನ್ನೇ. ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ, ಮಾದರಿಯು ಯಾವಾಗಲೂ ಒಂದೇ ಆಗಿರುತ್ತದೆ: ಪ್ರಚೋದಕ ಅಂಶ, ಗುಪ್ತ ಟೂಲ್‌ಟಿಪ್ ಅಂಶ ಮತ್ತು ಎರಡನ್ನು ಸಂಯೋಜಿಸಲು JavaScript.

ಲೈಬ್ರರಿಯು ವೈರಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಿದ್ದು ಅದು ಅಂಶವನ್ನು ಹೋವರ್ ಅಥವಾ ಫೋಕಸ್‌ನಲ್ಲಿ ತೋರಿಸಲು, ಮಸುಕು ಅಥವಾ ಮೌಸ್ ರಜೆಯ ಮೇಲೆ ಮರೆಮಾಡಲು ಮತ್ತು ಸ್ಕ್ರಾಲ್‌ನಲ್ಲಿ ಮರುಸ್ಥಾಪಿಸಲು/ಗಾತ್ರಗೊಳಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಕಾಲಾನಂತರದಲ್ಲಿ, ಟೂಲ್ಟಿಪ್ ದುರ್ಬಲವಾಗಬಹುದು. ಸಣ್ಣ ಬದಲಾವಣೆಗಳು ಅಪಾಯವನ್ನುಂಟುಮಾಡುತ್ತವೆ. ಸಣ್ಣಪುಟ್ಟ ಪರಿಹಾರಗಳು ಹಿನ್ನಡೆಗೆ ಕಾರಣವಾಗಿವೆ. ಕೆಟ್ಟದಾಗಿ, ಹೊಸ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ಅದೇ ಸಂಕೀರ್ಣತೆಯನ್ನು ಪಡೆದಿದೆ. ಥಿಂಗ್ಸ್ ತಾಂತ್ರಿಕವಾಗಿ ಕೆಲಸ, ಆದರೆ ಎಂದಿಗೂ ಇತ್ಯರ್ಥ ಅಥವಾ ಸಂಪೂರ್ಣ ಭಾವಿಸಿದರು. ಬ್ರೌಸರ್‌ನ ಸ್ಥಳೀಯ Popover API ಅನ್ನು ಬಳಸಿಕೊಂಡು ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಮರುನಿರ್ಮಾಣ ಮಾಡಲು ನಾನು ನಿರ್ಧರಿಸಿದಾಗ ಅದು ಸ್ಥಿತಿಯಾಗಿದೆ. ನಾನು ಪಾಪೋವರ್ API ಅನ್ನು ಪ್ರಯತ್ನಿಸಿದ ಕ್ಷಣ ನಾನು ಹೊಸದನ್ನು ಪ್ರಯೋಗಿಸಲು ಬಯಸುವ ಕಾರಣ ನಾನು Popover API ಅನ್ನು ಬಳಸಲು ಬದಲಾಯಿಸಲಿಲ್ಲ. ಬ್ರೌಸರ್ ಈಗಾಗಲೇ ಅರ್ಥಮಾಡಿಕೊಂಡಿರಬೇಕು ಎಂದು ನಾನು ನಂಬಿರುವ ಟೂಲ್‌ಟಿಪ್ ನಡವಳಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಲು ನಾನು ಆಯಾಸಗೊಂಡಿದ್ದರಿಂದ ನಾನು ಬದಲಾಯಿಸಿದೆ. ಮೊದಮೊದಲು ನನಗೆ ಸಂಶಯವಿತ್ತು. ಹೆಚ್ಚಿನ ಹೊಸ ವೆಬ್ API ಗಳು ಸರಳತೆಯನ್ನು ಭರವಸೆ ನೀಡುತ್ತವೆ, ಆದರೆ ನೀವು ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವ ಅದೇ ಸಂಕೀರ್ಣತೆಯನ್ನು ಸದ್ದಿಲ್ಲದೆ ಮರುಸೃಷ್ಟಿಸುವ ಅಂಟು, ಎಡ್ಜ್-ಕೇಸ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅಥವಾ ಫಾಲ್‌ಬ್ಯಾಕ್ ಲಾಜಿಕ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ಆದ್ದರಿಂದ, ನಾನು Popover API ಅನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಚಿಕ್ಕ ರೀತಿಯಲ್ಲಿ ಪ್ರಯತ್ನಿಸಿದೆ. ಅದು ಹೇಗಿತ್ತು ಎಂಬುದು ಇಲ್ಲಿದೆ:

ಗೆ ಸಂಪರ್ಕವನ್ನು ರಚಿಸುತ್ತದೆ <ಬಟನ್ popovertarget="tip-1">?

1. ಕೀಬೋರ್ಡ್ "ಜಸ್ಟ್ ವರ್ಕ್ಸ್" ಕೀಬೋರ್ಡ್ ಬೆಂಬಲವು ಅನೇಕ ಲೇಯರ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಜೋಡಿಸುವುದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ: ಫೋಕಸ್ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪ್ರಚೋದಿಸಬೇಕಾಗಿತ್ತು, ಮಸುಕು ಅದನ್ನು ಮರೆಮಾಡಬೇಕಾಗಿತ್ತು, Esc ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ವೈರ್ ಮಾಡಬೇಕಾಗಿತ್ತು ಮತ್ತು ಸಮಯವು ಮುಖ್ಯವಾಗಿದೆ. ನೀವು ಒಂದು ಎಡ್ಜ್ ಕೇಸ್ ಅನ್ನು ತಪ್ಪಿಸಿಕೊಂಡರೆ, ಟೂಲ್‌ಟಿಪ್ ತುಂಬಾ ಸಮಯ ತೆರೆದಿರುತ್ತದೆ ಅಥವಾ ಅದನ್ನು ಓದುವ ಮೊದಲು ಕಣ್ಮರೆಯಾಗುತ್ತದೆ. popover ಗುಣಲಕ್ಷಣವನ್ನು ಸ್ವಯಂ ಅಥವಾ ಕೈಪಿಡಿಗೆ ಹೊಂದಿಸುವುದರೊಂದಿಗೆ, ಬ್ರೌಸರ್ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: Tab ಮತ್ತು Shift+Tab ಸಾಮಾನ್ಯವಾಗಿ ವರ್ತಿಸುತ್ತದೆ, Esc ಪ್ರತಿ ಬಾರಿಯೂ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ ಮತ್ತು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಕೇಳುಗರ ಅಗತ್ಯವಿಲ್ಲ.

ಉಪಯುಕ್ತ ವಿವರಣೆ

ನನ್ನ ಕೋಡ್‌ಬೇಸ್‌ನಿಂದ ಕಣ್ಮರೆಯಾದವು ಜಾಗತಿಕ ಕೀಡೌನ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು, Esc-ನಿರ್ದಿಷ್ಟ ಕ್ಲೀನಪ್ ಲಾಜಿಕ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ಸಮಯದಲ್ಲಿ ಸ್ಟೇಟ್ ಚೆಕ್‌ಗಳು. ಕೀಬೋರ್ಡ್ ಅನುಭವವನ್ನು ನಾನು ನಿರ್ವಹಿಸಬೇಕಾಗಿರುವುದು ನಿಲ್ಲಿಸಿತು ಮತ್ತು ಅದು ಬ್ರೌಸರ್ ಗ್ಯಾರಂಟಿಯಾಯಿತು. 2. ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪ್ರಿಡಿಕ್ಟಬಿಲಿಟಿ ಇದು ಆಗಿತ್ತುದೊಡ್ಡ ಸುಧಾರಣೆ. ಎಚ್ಚರಿಕೆಯಿಂದ ARIA ಕೆಲಸ ಮಾಡಿದರೂ ಸಹ, ನಾನು ಮೊದಲೇ ವಿವರಿಸಿದಂತೆ ನಡವಳಿಕೆಯು ಬದಲಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಸಣ್ಣ ಬದಲಾವಣೆಯೂ ಅಪಾಯಕಾರಿ ಎನಿಸಿತು. ಸರಿಯಾದ ಪಾತ್ರದೊಂದಿಗೆ ಪಾಪೋವರ್ ಅನ್ನು ಬಳಸುವುದು ಹೆಚ್ಚು ಸ್ಥಿರವಾಗಿ ಮತ್ತು ಏನಾಗಲಿದೆ ಎಂದು ಊಹಿಸಬಹುದಾದಂತೆ ಕಾಣುತ್ತದೆ:

ಉಪಯುಕ್ತ ವಿವರಣೆ

ಮತ್ತು ಮತ್ತೊಂದು ಗೆಲುವು ಇಲ್ಲಿದೆ: ಸ್ವಿಚ್ ನಂತರ, ಲೈಟ್‌ಹೌಸ್ ಸಂವಹನಕ್ಕಾಗಿ ತಪ್ಪಾದ ARIA ಸ್ಥಿತಿಯ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಫ್ಲ್ಯಾಗ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿದೆ, ಏಕೆಂದರೆ ನಾನು ಆಕಸ್ಮಿಕವಾಗಿ ತಪ್ಪಾಗಲು ಇನ್ನು ಮುಂದೆ ಕಸ್ಟಮ್ ARIA ಸ್ಥಿತಿಗಳಿಲ್ಲ.

3. ಗಮನ ನಿರ್ವಹಣೆ ಗಮನವು ದುರ್ಬಲವಾಗಿರುತ್ತದೆ. ಮೊದಲು, ನಾನು ಈ ರೀತಿಯ ನಿಯಮಗಳನ್ನು ಹೊಂದಿದ್ದೇನೆ: ಫೋಕಸ್ ಟ್ರಿಗ್ಗರ್ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ತೋರಿಸಲಿ, ಫೋಕಸ್ ಅನ್ನು ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಸರಿಸಿ ಮತ್ತು ಮುಚ್ಚಬೇಡಿ, ಅದು ತುಂಬಾ ಹತ್ತಿರದಲ್ಲಿದ್ದಾಗ ಪ್ರಚೋದಕವನ್ನು ಮಸುಕುಗೊಳಿಸಿ, ಮತ್ತು ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಮುಚ್ಚಿ ಮತ್ತು ಹಸ್ತಚಾಲಿತವಾಗಿ ಫೋಕಸ್ ಮರುಸ್ಥಾಪಿಸಿ. ಇದು ಮಾಡದ ತನಕ ಇದು ಕೆಲಸ ಮಾಡಿದೆ. Popover API ನೊಂದಿಗೆ, ಬ್ರೌಸರ್ ಸರಳವಾದ ಮಾದರಿಯನ್ನು ಜಾರಿಗೊಳಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಗಮನವು ಹೆಚ್ಚು ನೈಸರ್ಗಿಕವಾಗಿ popover ಗೆ ಚಲಿಸಬಹುದು. ಪಾಪೋವರ್ ಅನ್ನು ಮುಚ್ಚುವುದರಿಂದ ಟ್ರಿಗ್ಗರ್‌ಗೆ ಫೋಕಸ್ ಮರಳುತ್ತದೆ ಮತ್ತು ಯಾವುದೇ ಅದೃಶ್ಯ ಫೋಕಸ್ ಟ್ರ್ಯಾಪ್‌ಗಳು ಅಥವಾ ಕಳೆದುಹೋದ ಫೋಕಸ್ ಕ್ಷಣಗಳಿಲ್ಲ. ಮತ್ತು ನಾನು ಫೋಕಸ್ ಮರುಸ್ಥಾಪನೆ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಲಿಲ್ಲ; ನಾನು ಅದನ್ನು ತೆಗೆದುಹಾಕಿದೆ.

ತೀರ್ಮಾನ Popover API ಎಂದರೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಇನ್ನು ಮುಂದೆ ನೀವು ಅನುಕರಿಸುವ ಸಂಗತಿಯಲ್ಲ. ಅವರು ಬ್ರೌಸರ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ವಿಷಯ. ತೆರೆಯುವಿಕೆ, ಮುಚ್ಚುವಿಕೆ, ಕೀಬೋರ್ಡ್ ನಡವಳಿಕೆ, ಎಸ್ಕೇಪ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಮತ್ತು ಪ್ರವೇಶದ ದೊಡ್ಡ ಭಾಗವು ಈಗ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನಿಂದಲೇ ಬಂದಿದೆ, ಜಾಹೀರಾತು-ಹಾಕ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಅಲ್ಲ. ಟೂಲ್‌ಟಿಪ್ ಲೈಬ್ರರಿಗಳು ಬಳಕೆಯಲ್ಲಿಲ್ಲ ಎಂದು ಅರ್ಥವಲ್ಲ ಏಕೆಂದರೆ ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳು, ಭಾರೀ ಗ್ರಾಹಕೀಕರಣ ಅಥವಾ ಪರಂಪರೆಯ ನಿರ್ಬಂಧಗಳಿಗೆ ಅವು ಇನ್ನೂ ಅರ್ಥಪೂರ್ಣವಾಗಿವೆ, ಆದರೆ ಡೀಫಾಲ್ಟ್ ಬದಲಾಗಿದೆ. ಮೊದಲ ಬಾರಿಗೆ, ಸರಳವಾದ ಟೂಲ್ಟಿಪ್ ಕೂಡ ಹೆಚ್ಚು ಸರಿಯಾಗಿರಬಹುದು. ನಿಮಗೆ ಕುತೂಹಲವಿದ್ದರೆ, ಈ ಪ್ರಯೋಗವನ್ನು ಪ್ರಯತ್ನಿಸಿ: ನಿಮ್ಮ ಉತ್ಪನ್ನದಲ್ಲಿ ಕೇವಲ ಒಂದು ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು Popover API ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ, ಎಲ್ಲವನ್ನೂ ಪುನಃ ಬರೆಯಬೇಡಿ, ಸಂಪೂರ್ಣ ಸಿಸ್ಟಮ್ ಅನ್ನು ಸ್ಥಳಾಂತರಿಸಬೇಡಿ ಮತ್ತು ಒಂದನ್ನು ಆರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್‌ನಿಂದ ಏನು ಕಣ್ಮರೆಯಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಿ. ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ನಿಮಗೆ ಉತ್ತಮವಾದ ಪ್ರಾಚೀನತೆಯನ್ನು ನೀಡಿದಾಗ, ಗೆಲುವು ಕೇವಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಕಡಿಮೆ ಸಾಲುಗಳಲ್ಲ, ಆದರೆ ನೀವು ಚಿಂತಿಸಬೇಕಾದ ಕಡಿಮೆ ವಿಷಯಗಳು. ನನ್ನ GitHub ರೆಪೋದಲ್ಲಿ ಸಂಪೂರ್ಣ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ. ಹೆಚ್ಚಿನ ಓದುವಿಕೆ ಪಾಪೋವರ್‌ಗಳು ಮತ್ತು ಸಂಬಂಧಿತ API ಗಳಲ್ಲಿ ಆಳವಾದ ಡೈವ್‌ಗಳಿಗಾಗಿ:

"ಪಾಪಿನ್ ಇನ್", ಜೆಫ್ ಗ್ರಹಾಂ "ಪಾಪೋವರ್ಸ್ ಮತ್ತು ಡೈಲಾಗ್‌ಗಳ ನಡುವಿನ ಸಂಬಂಧವನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುವುದು", ಝೆಲ್ ಲೈವ್ "ಪಾಪೋವರ್=ಸುಳಿವು ಎಂದರೇನು?", ಉನಾ ಕ್ರಾವೆಟ್ಸ್ "ಇನ್ವೋಕರ್ ಕಮಾಂಡ್ಸ್", ಡೇನಿಯಲ್ ಶ್ವಾರ್ಜ್ "HTML Popover ನೊಂದಿಗೆ ಸ್ವಯಂ-ಮುಚ್ಚುವಿಕೆಯ ಅಧಿಸೂಚನೆಯನ್ನು ರಚಿಸಲಾಗುತ್ತಿದೆ", ಪ್ರೀತಿ UI Popover API ವಿವರಣೆಯನ್ನು ತೆರೆಯಿರಿ "ಪಾಪ್ (ಓವರ್) ದಿ ಬಲೂನ್ಸ್", ಜಾನ್ ರಿಯಾ "CSS ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್", ಜುವಾನ್ ಡಿಯಾಗೋ ರೊಡ್ರಿಗಸ್

MDN Popover API ಗಾಗಿ ಸಮಗ್ರ ತಾಂತ್ರಿಕ ದಾಖಲಾತಿಯನ್ನು ಸಹ ನೀಡುತ್ತದೆ.

You May Also Like

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free