{"id":165,"date":"2014-09-29T08:42:53","date_gmt":"2014-09-29T08:42:53","guid":{"rendered":"http:\/\/ordasvit.com\/wp-time\/?page_id=165"},"modified":"2021-09-14T13:19:09","modified_gmt":"2021-09-14T13:19:09","slug":"tooltips","status":"publish","type":"page","link":"https:\/\/ordasvit.com\/wp-time\/tooltips\/","title":{"rendered":"Tooltips and Popover"},"content":{"rendered":"<div class=\"page\">\n<h3>Tooltips and Popover<\/h3>\n<script type=\"text\/javascript\">\n jQuery(document).ready(function(){\n   jQuery(\"#top\").tooltip({placement : 'top'});\n   jQuery(\"#right\").tooltip({placement : 'right'});\n   jQuery(\"#bottom\").tooltip({placement : 'bottom'});\n   jQuery(\"#left\").tooltip({ placement : 'left'});\n  });\n<\/script>\n<h3>Tooltip<\/h3>\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"left\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"\" data-original-title=\"Tooltip on left\">Tooltip on left<\/button>&nbsp; \n\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"top\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"Tooltip on top\">Tooltip on top<\/button>&nbsp; \n\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"bottom\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"\" data-original-title=\"Tooltip on bottom\">Tooltip on bottom<\/button> &nbsp;\n\n<button style=\"margin-bottom:20px\" type=\"button\" class=\"btn btn-default\" id=\"right\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"\" data-original-title=\"Tooltip on right\">Tooltip on right<\/button>&nbsp;\n<div id=\"accordion1\" class=\"accordion\">\n<div class=\"accordion-group\">\n<div class=\"accordion-heading\"><a class=\"accordion-toggle\" href=\"#collapse22\" data-toggle=\"collapse\" data-parent=\"#accordion22\">How to use<\/a><\/div>\n<div id=\"collapse22\" class=\"accordion-body collapse\">\n<div class=\"accordion-inner\">\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"html\" style=\"font-family:monospace;\">&lt;script type='text\/javascript'&gt;\n jQuery(document).ready(function(){\n   jQuery(\"#left\").tooltip({ placement : 'left'});\n  });\n&lt;\/script&gt;\n&nbsp;\n&lt;button type=\"button\" class=\"btn btn-default\" id=\"left\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"Tooltip on left\"&gt;Tooltip on left&lt;\/button&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3>Popover<\/h3>\n<script type=\"text\/javascript\">\njQuery(document).ready(function(){\n    jQuery(\"a#top\").popover({\n        placement : 'top'\n    });\n\n    jQuery(\"a#bottom\").popover({\n        placement : 'bottom'\n    });\n\n    jQuery(\"a#left\").popover({\n        placement : 'left'\n    });\n\n    jQuery(\"a#right\").popover({\n        placement : 'right'\n    });\n});\n<\/script>\n<div class=\"row\">\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\n  <a href=\"#\" id=\"top\" class=\"btn btn-md btn-danger\" data-toggle=\"popover\" title=\"\" data-content=\"The size of the pop over depends upon the text area\" role=\"button\" data-original-title=\"Popover Demo\">Click to toggle popover top<\/a><\/div>\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\n  <a href=\"#\" id=\"left\" class=\"btn btn-md btn-danger\" data-toggle=\"popover\" title=\"\" data-content=\"The size of the pop over depends upon the text area\" role=\"button\" data-original-title=\"Popover Demo\">Click to toggle popover left<\/a><\/div>\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\n  <a href=\"#\" id=\"bottom\" class=\"btn btn-md btn-danger\" data-toggle=\"popover\" title=\"\" data-content=\"The size of the pop over depends upon the text area\" role=\"button\" data-original-title=\"Popover Demo\">Click to toggle popover bottom<\/a><\/div>\n<div class=\"col-lg-3\" style=\"margin-bottom:20px\">\n  <a href=\"#\" id=\"right\" class=\"btn btn-md btn-danger\" data-toggle=\"popover\" title=\"\" data-content=\"The size of the pop over depends upon the text area\" role=\"button\" data-original-title=\"Popover Demo\">Click to toggle popover right<\/a><\/div>\n<\/div>\n<div id=\"accordion20\" class=\"accordion\">\n<div class=\"accordion-group\">\n<div class=\"accordion-heading\"><a class=\"accordion-toggle\" href=\"#collapse20\" data-toggle=\"collapse\" data-parent=\"#accordion20\">How to use<\/a><\/div>\n<div id=\"collapse20\" class=\"accordion-body collapse\">\n<div class=\"accordion-inner\">\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"html\" style=\"font-family:monospace;\">&lt;script&gt;\njQuery(document).ready(function(){\n    jQuery(\".DemoBS a\").popover({\n        placement : 'top'\n    });\n});\n&lt;\/script&gt;\n&nbsp;\n&lt;div class=\"DemoBS\"&gt;\n   &lt;a href=\"#\" class=\"btn btn-md btn-danger\" \n  data-toggle=\"popover\" title=\"PopOver Demo\" \n  data-content=\"The size of the pop over depends upon the text area\"\n  role=\"button\"&gt;Click to toggle popover top&lt;\/a&gt;\n&lt;\/div&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Tooltips and Popover Tooltip Tooltip on left&nbsp; Tooltip on top&nbsp; Tooltip on bottom &nbsp; Tooltip on right&nbsp; How to use &lt;script type=&#8217;text\/javascript&#8217;&gt; jQuery(document).ready(function(){ jQuery(&#8220;#left&#8221;).tooltip({ placement : &#8216;left&#8217;}); }); &lt;\/script&gt; &nbsp;&#8230;<a href=\"https:\/\/ordasvit.com\/wp-time\/tooltips\/\"> Read More<\/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-time\/wp-json\/wp\/v2\/pages\/165"}],"collection":[{"href":"https:\/\/ordasvit.com\/wp-time\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ordasvit.com\/wp-time\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-time\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ordasvit.com\/wp-time\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":103,"href":"https:\/\/ordasvit.com\/wp-time\/wp-json\/wp\/v2\/pages\/165\/revisions"}],"predecessor-version":[{"id":537,"href":"https:\/\/ordasvit.com\/wp-time\/wp-json\/wp\/v2\/pages\/165\/revisions\/537"}],"wp:attachment":[{"href":"https:\/\/ordasvit.com\/wp-time\/wp-json\/wp\/v2\/media?parent=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}