{"id":165,"date":"2014-09-29T08:42:53","date_gmt":"2014-09-29T08:42:53","guid":{"rendered":"http:\/\/ordasvit.com\/wp-artist\/?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-artist\/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\">\n\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"html\" style=\"font-family:monospace;\">&lt;script type='text\/javascript'&gt;\r\n jQuery(document).ready(function(){\r\n   jQuery(&quot;#left&quot;).tooltip({ placement : 'left'});\r\n  });\r\n&lt;\/script&gt;\r\n&nbsp;\n&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; id=&quot;left&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;left&quot; title=&quot;Tooltip on left&quot;&gt;Tooltip on left&lt;\/button&gt;<\/pre><\/td><\/tr><\/table><\/div>\n\n\n\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\">\n\n\n<div class=\"wp_syntax\"><table><tr><td class=\"code\"><pre class=\"html\" style=\"font-family:monospace;\">&lt;script&gt;\r\njQuery(document).ready(function(){\r\n    jQuery(&quot;.DemoBS a&quot;).popover({\r\n        placement : 'top'\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n&nbsp;\n&lt;div class=&quot;DemoBS&quot;&gt;\r\n   &lt;a href=&quot;#&quot; class=&quot;btn btn-md btn-danger&quot; \r\n  data-toggle=&quot;popover&quot; title=&quot;PopOver Demo&quot; \r\n  data-content=&quot;The size of the pop over depends upon the text area&quot;\r\n  role=&quot;button&quot;&gt;Click to toggle popover top&lt;\/a&gt;\r\n&lt;\/div&gt;<\/pre><\/td><\/tr><\/table><\/div>\n\n\n\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 &lt;script type=&#8217;text\/javascript&#8217;&gt; jQuery(document).ready(function(){ jQuery(&quot;#left&quot;).tooltip({ placement : &#8216;left&#8217;}); }); &lt;\/script&gt; &nbsp; &lt;button type=&quot;button&quot; class=&quot;btn [&hellip;]","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-artist\/wp-json\/wp\/v2\/pages\/165"}],"collection":[{"href":"https:\/\/ordasvit.com\/wp-artist\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ordasvit.com\/wp-artist\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-artist\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-artist\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":102,"href":"https:\/\/ordasvit.com\/wp-artist\/wp-json\/wp\/v2\/pages\/165\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/ordasvit.com\/wp-artist\/wp-json\/wp\/v2\/pages\/165\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/ordasvit.com\/wp-artist\/wp-json\/wp\/v2\/media?parent=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}