{"id":165,"date":"2014-09-29T08:42:53","date_gmt":"2014-09-29T08:42:53","guid":{"rendered":"http:\/\/ordasvit.com\/wp-plant\/?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-plant\/tooltips\/","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 to use Tooltip on left Popover Click to toggle popover top Click to toggle popover left Click to toggle popover bottom Click to toggle popover right How to use Click to toggle popover top","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-plant\/wp-json\/wp\/v2\/pages\/165"}],"collection":[{"href":"https:\/\/ordasvit.com\/wp-plant\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ordasvit.com\/wp-plant\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-plant\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-plant\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":102,"href":"https:\/\/ordasvit.com\/wp-plant\/wp-json\/wp\/v2\/pages\/165\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/ordasvit.com\/wp-plant\/wp-json\/wp\/v2\/pages\/165\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/ordasvit.com\/wp-plant\/wp-json\/wp\/v2\/media?parent=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}