{"id":4027,"date":"2024-09-02T14:04:13","date_gmt":"2024-09-02T14:04:13","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4027"},"modified":"2026-01-20T14:49:45","modified_gmt":"2026-01-20T14:49:45","slug":"%e4%bb%80%e4%b9%88%e6%98%af%e7%bd%91%e7%ab%99%e5%b7%a5%e5%85%b7%e6%8f%90%e7%a4%ba","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/zh\/%e7%ad%94%e6%a1%88\/%e4%bb%80%e4%b9%88%e6%98%af%e7%bd%91%e7%ab%99%e5%b7%a5%e5%85%b7%e6%8f%90%e7%a4%ba\/","title":{"rendered":"\u4ec0\u4e48\u662f\u7f51\u7ad9\u5de5\u5177\u63d0\u793a\uff1f"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u76ee\u5f55<\/h2><nav><ul><li><a href=\"#why-should-you-use-tooltips\">\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528\u5de5\u5177\u63d0\u793a\uff1f<\/a><\/li><li><a href=\"#how-do-tooltips-work\">\u5de5\u5177\u63d0\u793a\u662f\u5982\u4f55\u5de5\u4f5c\u7684\uff1f<\/a><\/li><li><a href=\"#where-should-tooltips-be-placed\">\u5de5\u5177\u63d0\u793a\u5e94\u8be5\u653e\u5728\u54ea\u91cc\uff1f<\/a><\/li><li><a href=\"#what-are-the-best-practices-for-designing-tooltips\">\u8bbe\u8ba1\u5de5\u5177\u63d0\u793a\u7684\u6700\u4f73\u5b9e\u8df5\u662f\u4ec0\u4e48\uff1f<\/a><\/li><li><a href=\"#can-a-tooltip-be-a-button\">\u5de5\u5177\u63d0\u793a\u53ef\u4ee5\u4f5c\u4e3a\u6309\u94ae\u5417\uff1f<\/a><\/li><li><a href=\"#are-there-any-accessibility-considerations-for-tooltips\">\u7f51\u7ad9\u5de5\u5177\u63d0\u793a\u6709\u54ea\u4e9b\u65e0\u969c\u788d\u8bbf\u95ee\u65b9\u9762\u7684\u8003\u8651\uff1f<\/a><\/li><li><a href=\"#conclusion\">\u603b\u7ed3<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-should-you-use-tooltips\" style=\"font-size:32px\"><strong>\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528\u5de5\u5177\u63d0\u793a\uff1f<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u5de5\u5177\u63d0\u793a\u53ef\u4ee5\u901a\u8fc7\u7b80\u8981\u63cf\u8ff0\u590d\u6742\u529f\u80fd\u3001\u7a81\u51fa\u663e\u793a\u76f8\u5173\u4f46\u901a\u5e38\u9690\u85cf\u7684\u9009\u9879\u4ee5\u53ca\u7b80\u5316\u4e0d\u540c\u7528\u6237\u7684\u5bfc\u822a\u6b65\u9aa4\u6765\u5f71\u54cd\u7f51\u7ad9\u548c\u5e94\u7528\u7a0b\u5e8f\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u6df1\u5165\u4e86\u89e3\uff1a \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u5982\u679c\u7528\u6237\u9700\u8981\u7279\u522b\u6ce8\u610f\u548c\u53c2\u4e0e\u7684\u91cd\u70b9\uff0c\u4e0e\u5176\u89e3\u91ca\u6240\u6709\u5185\u5bb9\uff0c\u4e0d\u5982\u4f7f\u7528\u5de5\u5177\u63d0\u793a\u8fdb\u884c\u6c9f\u901a\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-tooltips-work\" style=\"font-size:32px\"><strong>\u5de5\u5177\u63d0\u793a\u662f\u5982\u4f55\u5de5\u4f5c\u7684\uff1f<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u901a\u5e38\uff0c\u5c06\u9f20\u6807\u60ac\u505c\u5728\u67d0\u4e2a\u5143\u7d20\u4e0a\u5373\u53ef\u6fc0\u6d3b\u5de5\u5177\u63d0\u793a\u3002\u5728\u89e6\u6478\u5c4f\u4e0a\uff0c\u60a8\u53ef\u4ee5\u70b9\u51fb\u3002\u5f53\u60a8\u5c06\u9f20\u6807\u60ac\u505c\u5728\u67d0\u4e2a\u5143\u7d20\u4e0a\u65f6\uff0c\u5de5\u5177\u63d0\u793a\u4f1a\u663e\u793a\u4e00\u4e2a\u5305\u542b\u4fe1\u606f\u7684\u6846\uff0c\u5c06\u9f20\u6807\u79fb\u5f00\u4f1a\u4f7f\u5de5\u5177\u63d0\u793a\u6d88\u5931\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u4e13\u5bb6\u63d0\u793a\uff1a  \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u6839\u636e\u7528\u6237\u6d4f\u89c8\u65f6\u7684\u6709\u610f\u64cd\u4f5c\uff0c\u9002\u5f53\u5730\u5ef6\u8fdf\u5de5\u5177\u63d0\u793a\u7684\u51fa\u73b0\u662f\u6709\u76ca\u7684\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"where-should-tooltips-be-placed\" style=\"font-size:32px\"><strong>\u5de5\u5177\u63d0\u793a\u5e94\u8be5\u653e\u5728\u54ea\u91cc\uff1f<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u5de5\u5177\u63d0\u793a\u7684\u4f4d\u7f6e\u5e94\u6613\u4e8e\u770b\u5230\uff0c\u5e76\u4e14\u4e0d\u4f1a\u906e\u6321\u4efb\u4f55\u5176\u4ed6\u9875\u9762\u7ec4\u4ef6\uff1b\u5b83\u901a\u5e38\u663e\u793a\u5728\u60ac\u505c\u5143\u7d20\u7684\u4e0a\u65b9\u3001\u4e0b\u65b9\u6216\u4fa7\u9762\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u6df1\u5165\u4e86\u89e3\uff1a\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u4e0d\u8981\u4ec5\u4ec5\u4f9d\u8d56\u4e00\u4e2a\u6216\u591a\u4e2a\u9884\u5b9a\u7684\u5de5\u5177\u63d0\u793a\u4f4d\u7f6e - \u5efa\u8bae\u6d4b\u8bd5\u8fd9\u4e9b\u4e0d\u540c\u7684\u5de5\u5177\u63d0\u793a\u4f4d\u7f6e\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-best-practices-for-designing-tooltips\" style=\"font-size:32px\"><strong>\u8bbe\u8ba1\u5de5\u5177\u63d0\u793a\u7684\u6700\u4f73\u5b9e\u8df5\u662f\u4ec0\u4e48\uff1f<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u8bbe\u8ba1\u5de5\u5177\u63d0\u793a\u7684\u6700\u4f73\u5b9e\u8df5\u901a\u5e38\u6db5\u76d6\u4ee5\u4e0b\u4e3b\u9898\uff1a&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u4fdd\u6301\u56de\u590d\u7b80\u6d01\uff1a<\/strong> \u907f\u514d\u8d85\u8fc7\u5408\u7406\u7684\u957f\u5ea6\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u4f7f\u7528\u7b80\u5355\u7684\u8bed\u8a00\uff1a<\/strong> \u907f\u514d\u4f7f\u7528\u672f\u8bed\u6216\u8fc7\u4e8e\u4e13\u4e1a\u7684\u8bcd\u6c47\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u4f7f\u5176\u4e0e\u7528\u6237\u76f8\u5173\uff1a<\/strong> \u5c06\u6d88\u606f\u4e0e\u7528\u6237\u9f20\u6807\u60ac\u505c\u7684\u6309\u94ae\u5bf9\u9f50\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u901a\u7528\u53ef\u7528\u6027\uff1a <\/strong>\u786e\u4fdd\u6b8b\u969c\u4eba\u58eb\u4e5f\u53ef\u4ee5\u8bbf\u95ee\u4f60\u7684\u5de5\u5177\u63d0\u793a\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u6613\u8bfb\u6027\uff1a<\/strong> \u4f7f\u7528\u6e05\u6670\u7684\u80cc\u666f\u548c\u6587\u5b57\u5bf9\u6bd4\u6765\u8bbe\u8ba1\u5de5\u5177\u63d0\u793a\uff0c\u4ee5\u786e\u4fdd\u6613\u4e8e\u9605\u8bfb\u3002<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u4e13\u5bb6\u63d0\u793a\uff1a \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u786e\u4fdd\u7f51\u7ad9\u6216\u5e94\u7528\u4e0a\u6240\u6709\u5de5\u5177\u63d0\u793a\u4f7f\u7528\u76f8\u540c\u7684\u6837\u5f0f\uff0c\u4ee5\u4f7f\u5176\u770b\u8d77\u6765\u66f4\u7cbe\u7f8e\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"can-a-tooltip-be-a-button\" style=\"font-size:32px\"><strong>\u5de5\u5177\u63d0\u793a\u53ef\u4ee5\u4f5c\u4e3a\u6309\u94ae\u5417\uff1f<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u6709\u65f6\u5019\uff01\u5728\u6807\u51c6\u7528\u6cd5\u4e2d\uff0c\u5de5\u5177\u63d0\u793a\u4ec5\u7528\u4e8e\u4fe1\u606f\u63d0\u4f9b\uff0c\u5c3d\u7ba1\u5176\u4e2d\u4e5f\u53ef\u4ee5\u5305\u542b\u94fe\u63a5\u6216\u6309\u94ae\u3002\u8fd9\u4f7f\u7528\u6237\u80fd\u591f\u5728\u5de5\u5177\u63d0\u793a\u5185\u6267\u884c\u64cd\u4f5c\uff0c\u4f46\u4e5f\u4e0d\u8981\u8fc7\u5ea6\u4f7f\u7528\u6309\u94ae \u2014\u2014 \u8fc7\u591a\u7684\u6309\u94ae\u53ef\u80fd\u4f1a\u8ba9\u4eba\u4e0d\u77e5\u6240\u63aa\u3002<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\n\u6df1\u5165\u4e86\u89e3\uff1a \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u6700\u597d\u4ec5\u5728\u6709\u5173\u952e\u4efb\u52a1\u9700\u8981\u5b8c\u6210\u6216\u7a7a\u95f4\u6709\u9650\u7684\u60c5\u51b5\u4e0b\u63d0\u4f9b\u4ea4\u4e92\u5f0f\u5de5\u5177\u63d0\u793a\u3002\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"are-there-any-accessibility-considerations-for-tooltips\" style=\"font-size:32px\"><strong>\u5de5\u5177\u63d0\u793a\u5728\u65e0\u969c\u788d\u8bbf\u95ee\u65b9\u9762\u6709\u54ea\u4e9b\u8003\u8651\u4e8b\u9879\uff1f<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u662f\u7684\uff01\u5de5\u5177\u63d0\u793a\u7b26\u5408\u7f51\u9875\u53ef\u8bbf\u95ee\u6027\u539f\u5219\uff0c\u5982\u679c\u60a8\u8ba1\u5212\u521b\u5efa\u5b83\u4eec\uff0c\u8bf7\u8bb0\u4f4f\u4ee5\u4e0b\u51e0\u4e2a\u5173\u952e\u70b9\uff1a<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u952e\u76d8\u65e0\u969c\u788d\uff1a<\/strong> \u5de5\u5177\u63d0\u793a\u5e94\u53ef\u4ee5\u901a\u8fc7\u952e\u76d8\u8f93\u5165\u542f\u7528\u3001\u5bfc\u822a\u548c\u5173\u95ed\uff0c\u786e\u4fdd\u9f20\u6807\u529f\u80fd\u6709\u9650\u7684\u7528\u6237\u4e5f\u80fd\u8bbf\u95ee\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u9488\u5bf9\u5c4f\u5e55\u9605\u8bfb\u5668\u8fdb\u884c\u4f18\u5316\uff1a<\/strong> \u5efa\u8bae\u5de5\u5177\u63d0\u793a\u5185\u5bb9\u53ef\u4ee5\u88ab\u5c4f\u5e55\u9605\u8bfb\u5668\u6717\u8bfb\u51fa\u6765\uff0c\u5e76\u4e14\u80fd\u8ba9\u89c6\u969c\u7528\u6237\u7406\u89e3\u3002\u8fd9\u901a\u5e38\u9700\u8981\u4f7f\u7528\u4e00\u4e9b ARIA \u5c5e\u6027\u548c\/\u6216\u6807\u7b7e\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u5bf9\u6bd4\uff1a<\/strong> \u5de5\u5177\u63d0\u793a\u4e0a\u7684\u6587\u672c\u548c\u80cc\u666f\u5fc5\u987b\u6709\u8db3\u591f\u7684\u989c\u8272\u5bf9\u6bd4\u5ea6\uff0c\u4ee5\u4fbf\u5f31\u89c6\u7528\u6237\u8212\u9002\u5730\u67e5\u770b\u6b64\u7c7b\u5185\u5bb9\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>\u7126\u70b9\u7ba1\u7406\uff1a<\/strong> \u5f53\u67d0\u4e2a\u5de5\u5177\u63d0\u793a\u88ab\u6fc0\u6d3b\u65f6\uff0c\u5fc5\u987b\u80fd\u591f\u5c06\u7126\u70b9\u653e\u5728\u8be5\u5de5\u5177\u63d0\u793a\u4e0a\uff0c\u4ee5\u4fbf\u4f7f\u7528\u952e\u76d8\u7684\u7528\u6237\u53ef\u4ee5\u6d4f\u89c8\u5176\u53ef\u80fd\u5305\u542b\u4ea4\u4e92\u529f\u80fd\u7684\u5185\u5bb9\u3002<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">\u8bf7\u8bb0\u4f4f\uff1a\u8bbe\u8ba1\u5728\u8003\u8651\u6240\u6709\u7528\u6237\uff08\u5305\u62ec\u6b8b\u969c\u4eba\u58eb\uff09\u7684\u9700\u6c42\u65f6\u4f1a\u66f4\u52a0\u6709\u6548\u3002\u540c\u6837\u91cd\u8981\u7684\u662f\u8981\u6ce8\u610f\uff0c\u901a\u8fc7\u5de5\u5177\u63d0\u793a\u63d0\u4f9b\u7684\u4fe1\u606f\u5e94\u8be5\u5bf9\u6240\u6709\u4eba\uff08\u65e0\u8bba\u5176\u80fd\u529b\u5982\u4f55\uff09\u90fd\u5177\u6709\u5305\u5bb9\u6027\u3002<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>\u603b\u7ed3<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u5de5\u5177\u63d0\u793a\u662f\u53ef\u5e2e\u52a9\u7528\u6237\u66f4\u597d\u5730\u7406\u89e3\u548c\u5b9a\u4e49\u7528\u9014\u7684\u9644\u52a0\u4fe1\u606f\u3002\u5de5\u5177\u63d0\u793a\u7684\u8bbe\u8ba1\u3001\u4f4d\u7f6e\u548c\u8986\u76d6\u8303\u56f4\u5fc5\u987b\u5408\u9002\u3002\u6709\u6548\u5de5\u5177\u63d0\u793a\u7684\u52a0\u5165\u53ef\u4ee5\u589e\u5f3a\u7528\u6237\u5728\u6570\u5b57\u4ea7\u54c1\u4e2d\u7684\u4e92\u52a8\u548c\u5bfc\u822a\u3002<\/p>","protected":false},"excerpt":{"rendered":"<p>Why should you use tooltips? Tooltips can affect user experience on websites and applications by presenting brief descriptions of complicated functionalities, highlighting relevant but frequently hidden choices, and streamlining navigational steps for diverse individual users. Deep Dive: Whenever there is an important point that requires special attention and engagement from the user, instead of explaining [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4045,"template":"","answers_category":[28],"class_list":["post-4027","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7817,"card_image":4045,"content":[{"acf_fc_layout":"header_section","title":"\u4ec0\u4e48\u662f\u5de5\u5177\u63d0\u793a\uff1f","descriptions":"A tooltip is a concise message that contains relevant details to the users, usually displayed in a small window only when the cursor is placed over certain elements on the website or application and aims to enhance usability.\r\n\r\nIt works by supplementing the existing information on the screen while avoiding crowding the screen, which can happen if many little messages are left for the users.","tip_label":"Deep Dive","tip":"Picture tooltips as soft voices that quietly provide context and direction without pausing the active task of the user.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Tooltips provide users with relevant info in a concise format when they hover over or click on it","body":""},{"label":"Ensure appropriate measures are observed while designing any attached tooltips by making them visible and positioning them in relative proximity","body":""},{"label":"Tooltips give navigation further support by giving additional details and explanations but should not be the only method of navigating","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answer\/4027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/media\/4045"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/media?parent=4027"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/zh\/wp-json\/wp\/v2\/answers_category?post=4027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}