{"id":165,"date":"2014-09-29T08:42:53","date_gmt":"2014-09-29T08:42:53","guid":{"rendered":"http:\/\/ordasvit.com\/wp-human\/?page_id=165"},"modified":"2014-10-01T06:52:45","modified_gmt":"2014-10-01T06:52:45","slug":"tooltips","status":"publish","type":"page","link":"https:\/\/ordasvit.com\/wp-human\/?page_id=165","title":{"rendered":"Tooltips and Popover"},"content":{"rendered":"<script type='text\/javascript'>\r\n jQuery(document).ready(function(){\r\n   jQuery(\"#top\").tooltip({placement : 'top'});\r\n   jQuery(\"#right\").tooltip({placement : 'right'});\r\n   jQuery(\"#bottom\").tooltip({placement : 'bottom'});\r\n   jQuery(\"#left\").tooltip({ placement : 'left'});\r\n  });\r\n<\/script>\r\n<br>\r\n<h3>Tooltip<\/h3>\t\r\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"left\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"Tooltip on left\">Tooltip on left<\/button>&#xA0; \r\n\r\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"top\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Tooltip on top\">Tooltip on top<\/button>&#xA0; \r\n\r\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"bottom\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"Tooltip on bottom\">Tooltip on bottom<\/button> &#xA0;\r\n\r\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"right\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Tooltip on right\">Tooltip on right<\/button>&#xA0; \r\n<br>\r\n\r\n<div id=\"accordion1\" class=\"accordion\">\r\n<div class=\"accordion-group\">\r\n<div class=\"accordion-heading\"><a class=\"accordion-toggle\" href=\"#collapse22\" data-toggle=\"collapse\" data-parent=\"#accordion22\">How to use<\/a><\/div>\r\n<div id=\"collapse22\" class=\"accordion-body collapse\">\r\n<div class=\"accordion-inner\">\r\n\r\n<pre lang=\"html\">\r\n<script type='text\/javascript'>\r\n jQuery(document).ready(function(){\r\n   jQuery(\"#left\").tooltip({ placement : 'left'});\r\n  });\r\n<\/script>\r\n\r\n<button type=\"button\" class=\"btn btn-default\" id=\"left\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"Tooltip on left\">Tooltip on left<\/button>\r\n<\/pre>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<br><br>\r\n\r\n\r\n<h3>Popover<\/h3>\r\n\r\n<script type='text\/javascript'>\r\njQuery(document).ready(function(){\r\n    jQuery(\"a#top\").popover({\r\n        placement : 'top'\r\n    });\r\n\r\n    jQuery(\"a#bottom\").popover({\r\n        placement : 'bottom'\r\n    });\r\n\r\n    jQuery(\"a#left\").popover({\r\n        placement : 'left'\r\n    });\r\n\r\n    jQuery(\"a#right\").popover({\r\n        placement : 'right'\r\n    });\r\n});\r\n<\/script>\r\n\r\n<div class=\"row\">\r\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\r\n  <a href=\"#\" id=\"top\" class=\"btn btn-md btn-danger\" \r\n  data-toggle=\"popover\" title=\"Popover Demo\" \r\n  data-content=\"The size of the pop over depends upon the text area\"\r\n  role=\"button\">Click to toggle popover top<\/a>\r\n<\/div>\r\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\r\n  <a href=\"#\" id=\"left\" class=\"btn btn-md btn-danger\" \r\n  data-toggle=\"popover\" title=\"Popover Demo\" \r\n  data-content=\"The size of the pop over depends upon the text area\"\r\n  role=\"button\">Click to toggle popover left<\/a>\r\n<\/div>\r\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\r\n  <a href=\"#\" id=\"bottom\" class=\"btn btn-md btn-danger\" \r\n  data-toggle=\"popover\" title=\"Popover Demo\" \r\n  data-content=\"The size of the pop over depends upon the text area\"\r\n  role=\"button\">Click to toggle popover bottom<\/a>\r\n<\/div>\r\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\r\n  <a href=\"#\" id=\"right\" class=\"btn btn-md btn-danger\" \r\n  data-toggle=\"popover\" title=\"Popover Demo\" \r\n  data-content=\"The size of the pop over depends upon the text area\"\r\n  role=\"button\">Click to toggle popover right<\/a>\r\n<\/div>\r\n<\/div>\r\n<div id=\"accordion20\" class=\"accordion\">\r\n<div class=\"accordion-group\">\r\n<div class=\"accordion-heading\"><a class=\"accordion-toggle\" href=\"#collapse20\" data-toggle=\"collapse\" data-parent=\"#accordion20\">How to use<\/a><\/div>\r\n<div id=\"collapse20\" class=\"accordion-body collapse\">\r\n<div class=\"accordion-inner\">\r\n\r\n<pre lang=\"html\">\r\n<script>\r\njQuery(document).ready(function(){\r\n    jQuery(\".DemoBS a\").popover({\r\n        placement : 'top'\r\n    });\r\n});\r\n<\/script>\r\n\r\n<div class=\"DemoBS\">\r\n   <a href=\"#\" class=\"btn btn-md btn-danger\" \r\n  data-toggle=\"popover\" title=\"PopOver Demo\" \r\n  data-content=\"The size of the pop over depends upon the text area\"\r\n  role=\"button\">Click to toggle popover top<\/a>\r\n<\/div>\r\n<\/pre>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"Tooltip Tooltip on left&#xA0; Tooltip on top&#xA0; Tooltip on bottom &#xA0; Tooltip on right&#xA0; How&#8230;<a href=\"https:\/\/ordasvit.com\/wp-human\/?page_id=165\"><\/a>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages\/165"}],"collection":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=165"}],"version-history":[{"count":102,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages\/165\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=\/wp\/v2\/pages\/165\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/ordasvit.com\/wp-human\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}