{"id":157,"date":"2020-07-06T16:38:06","date_gmt":"2020-07-06T16:38:06","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=157"},"modified":"2021-01-20T20:16:34","modified_gmt":"2021-01-20T20:16:34","slug":"tool-tips","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/tool-tips\/","title":{"rendered":"Tool Tip\/Hover Help"},"content":{"rendered":"\n<h6 class=\"pt-5\">Tool Tip &#8211; Single<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-1-tab\" href=\"#example-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-1\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-1-tab\" href=\"#description-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-1\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-1-tab\" href=\"#code-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-1\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-1\" role=\"tabpanel\" aria-labelledby=\"example-1-tab\">\n\n            <div class=\"row mt-1 mb-5\">\n\n<div class=\"ml-5\">\n\n\n\n<div class=\"w-auto position-relative\">\t\n\n<p style=\"font-size: 20px;\">What type of lease term do you want?<\/p><figure class=\"wp-block-image size-large\" style=\"position: absolute; top: 0; right: -35px;\"><img decoding=\"async\" loading=\"lazy\" width=\"27\" height=\"27\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/2020\/08\/Tool-tips-80.jpg\" alt=\"\" class=\"wp-image-252 tool-tip-image\">\n<div class=\"tool-tip d-none\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p><\/div>\n<\/figure>\n\n<\/div>\n<\/div><!-- End col-12 -->\n\n\n\n<\/div>\n\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-1\" role=\"tabpanel\" aria-labelledby=\"description-1-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Tool Tips are found next to text, inputs and\/or components to provide users with an explanation of its purpose or function.<\/p>\n\n\n\n<p>Tool Tips present at the end of a question.<\/p>\n\n\n\n<p>DO NOT place Tool Tips in the label area.<\/p>\n\n\n\n<p>DO NOT place Tool Tips at the end of an input field unless absolutely necessary (ex. if multiple input fields are required for a question and one in particular needs additional clarification).<\/p>\n\n\n\n<p>Tool Tips should be horizontally center-aligned with the question\/text.<\/p>\n\n\n\n<p>Hover Help dialog should appear right side of Tool Tips.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-1\" role=\"tabpanel\" aria-labelledby=\"code-1-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n\t&lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6>Tool Tip &#8211; Lists<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-2-tab\" href=\"#example-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-2\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-2-tab\" href=\"#description-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-2\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-2-tab\" href=\"#code-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-2\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-2\" role=\"tabpanel\" aria-labelledby=\"example-2-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">    \n\n<!-- Check Box -->\n<div class=\"questionBox\">\n\t<h4>\n\t\tWhat forms of payment will the landlord accept?\n\t<\/h4>\n\t<div class=\"qd\">\n\t\t<input name=\"\" checked=\"checked\" type=\"checkbox\" class=\"ans\">\n\t\t<div class=\"cbq\">\n\t\t\t<label class=\"que\" for=\"\">\n\t\t\t\t<span>Cash<\/span>\n\t\t\t<\/label>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"qd\">\n\t\t<input name=\"\" checked=\"checked\" type=\"checkbox\" class=\"ans\">\n\t\t<div class=\"cbq\">\n\t\t\t<label class=\"que\" for=\"\">\n\t\t\t\t<span>Check<\/span>\n\t\t\t<\/label>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"qd\">\n\t\t<input name=\"\" type=\"checkbox\" class=\"ans\">\n\t\t<div class=\"cbq\">\n\t\t\t<label class=\"que\" for=\"\">\n\t\t\t\t<span>Direct debit<\/span>\n\t\t\t<\/label>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"qd\">\n\t\t<input name=\"\" type=\"checkbox\" class=\"ans\">\n\t\t<div class=\"cbq position-relative\">\n\t\t\t<label class=\"que\" for=\"\">\n\t\t\t\t<span>Venmo<\/span>\n\t\t\t<\/label>\n\t\t\t\t<figure class=\"wp-block-image size-large\" style=\"position: absolute; top: 0; right: -35px;\">\n\t\t\t\t\t<img decoding=\"async\" loading=\"lazy\" width=\"27\" height=\"27\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/2020\/08\/Tool-tips-80.jpg\" alt=\"\" class=\"wp-image-252 tool-tip-image\">\n\t\t\t\t\t<div class=\"tool-tip d-none\">\n\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/figure>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"qd\">\n\t\t<input name=\"\" type=\"checkbox\" class=\"ans\">\n\t\t<div class=\"cbq\">\n\t\t\t<label class=\"que\" for=\"\">\n\t\t\t\t<span>Other<\/span>\n\t\t\t<\/label>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<\/div>\n<!-- End col-12 -->\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-2\" role=\"tabpanel\" aria-labelledby=\"description-2-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-2\" role=\"tabpanel\" aria-labelledby=\"code-2-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n    &lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;      \n    &lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt;    \n    &lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt;   \n    &lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt;         \n    <\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Tool Tip &#8211; Single Example Description Code What type of lease term do you want? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/157"}],"collection":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":59,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/157\/revisions"}],"predecessor-version":[{"id":991,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/157\/revisions\/991"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}