{"id":922,"date":"2018-05-22T23:10:37","date_gmt":"2018-05-22T23:10:37","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=922"},"modified":"2018-07-26T23:04:22","modified_gmt":"2018-07-26T23:04:22","slug":"tooltips","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/tooltips\/","title":{"rendered":"Tooltips"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tTooltips<br \/>\n\t<\/h1>\n<h4>\n\t\tA Tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user hovers or focuses on the element it is describing. It is not focusable and cannot contain focusable content.<br \/>\n\t<\/h4>\n<h4>\n\t\t<a href=\"#\" title=\"Standard Tooltips\" target=\"_self\"><br \/>\n\t\tStandard Tooltips<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.tooltip-background {\nbackground: #353C48;\nborder-radius: 2px;\n}\n.tooltip-text {\nfont-size: 1rem;\ncolor: #FFFFFF;\ntext-align: center;\nline-height: 21px;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Icon Label Tooltips\" target=\"_self\"><br \/>\n\t\tIcon Label Tooltips<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p><strong>Component base<\/strong><\/p>\n<p><strong>In Context<\/strong><\/p>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/07\/Screen-Shot-2018-07-26-at-5.49.30-PM.png\" alt=\"Screen Shot 2018-07-26 at 5.49.30 PM\" itemprop=\"image\" height=\"227\" width=\"1293\" title=\"Screen Shot 2018-07-26 at 5.49.30 PM\"  \/><\/p>\n<p><strong>Interaction (Based on Google)<\/strong><\/p>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/07\/hover-label.gif\" alt=\"hover-label\" itemprop=\"image\" height=\"456\" width=\"1280\" title=\"hover-label\"  \/><br \/>\n\t<!-- HTML generated using hilite.me --><\/p>\n<pre>.label-tooltip {\n  background: rgba(97,97,97,0.90);\n  border-radius: 2px;\n  font-family: Lato-Bold;\n  font-size: 10px;\n  color: #FFFFFF;\n  text-align: center;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Tooltip with Header\" target=\"_self\"><br \/>\n\t\tTooltip with Header<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/07\/Group-8.png\" alt=\"Group 8\" itemprop=\"image\" height=\"145\" width=\"302\" title=\"Group 8\"  \/><br \/>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/07\/Group-10.png\" alt=\"Group 10\" itemprop=\"image\" height=\"142\" width=\"302\" title=\"Group 10\"  \/><br \/>\n\t<!-- HTML generated using hilite.me --><\/p>\n<pre>.background-base{\nbackground: #F4F6F9;\nborder: 1px solid #A8B7C7;\nbox-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.20);\nborder-radius: 2px;\n}\n.tooltip-body-text{\nfont-family: Roboto-Regular;\nfont-size: 13px;\ncolor: #002D41;\nline-height: 19px;\n}\n.tooltip-header {\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #FFFFFF;\npadding: 10px 24px 7px 24px\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Graph Tooltips\" target=\"_self\"><br \/>\n\t\tGraph Tooltips<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.tooltip_simple {\nfont-weight: 700;\nfont-size: 1rem;\ncolor: #54698D;\nbackground: #FFFFFF;\nborder: 1px solid #DFE3E6;\nbox-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);\nwidth: 73px;\nheight: 28px;\n}\n<\/pre>\n<pre>.tooltip_header {\nfont-size: 1.4rem;\ncolor: #FFFFFF;\nbackground: #002D41;\n}\n.color_marker_1 {\nbackground: #0074D9;\nborder-radius: 3px;\nwidth: 12px;\nheight: 12px;\n}\n.color_marker_2 {\nbackground: #7FB9EC;\nborder-radius: 3px;\u2028width: 12px;\nheight: 12px;\n}\n.table_row  {\nfont-weight: 700;\nfont-size: 1rem;\ncolor: #002D41;\n}\ntable_amount  {\nfont-weight: 700;\nfont-size: 1rem;\ncolor: #54698D;\n}\n.table_container {\nbackground: #FFFFFF;\nborder: 1px solid #DFE3E6;\nbox-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);\nwidth: 233px;\nheight: 115px;\n}\n<\/pre>\n<h2>\n\t\tColors<br \/>\n\t<\/h2>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>.tooltip-background<\/em><\/p>\n<p><em>.tooltip-text<\/em><\/p>\n<p><em>.tooltip-simple<\/em><\/p>\n<p><em>.tooltip-header<\/em><\/p>\n<p><em>.color-marker-1<\/em><\/p>\n<p><em>.color-marker-2<\/em><\/p>\n<p><em>.table-row<\/em><\/p>\n<p><em>.table-amount<\/em><\/p>\n<p><em>.table-container<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Tooltips A Tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user hovers or focuses on the element it is describing. It is not focusable and cannot contain focusable content. Standard Tooltips .tooltip-background { background: #353C48; border-radius: 2px; } .tooltip-text { font-size: 1rem; color:&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-922","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=922"}],"version-history":[{"count":9,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/922\/revisions"}],"predecessor-version":[{"id":1335,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/922\/revisions\/1335"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}