{"id":305,"date":"2014-05-24T06:32:41","date_gmt":"2014-05-24T11:32:41","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=305"},"modified":"2016-04-29T10:53:57","modified_gmt":"2016-04-29T10:53:57","slug":"popovers-and-tooltip","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/integrity-1\/shortcodes\/popovers-and-tooltip\/","title":{"rendered":"Popovers &amp; Tooltips"},"content":{"rendered":"<p> <a  class=\"x-img x-img-link x-img-thumbnail left\"  href=\"#example\" title=\"Check Me Out!\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   data-options=\"thumbnail: '\/\/theme.co\/media\/x-popover-tooltip-example.jpg'\"><img src=\"\/\/theme.co\/media\/x-popover-tooltip-example.jpg\" alt=\"Example\"><\/a> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, tooltip time!\\&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   href=\"#example\" title=\"Yeah, tooltip time!\" >Donec sed<\/a> odio dui. Maecenas faucibus mollis interdum. <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;right&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, tooltip time!\\&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   href=\"#example\" title=\"Yeah, tooltip time!\" >Cras justo odio<\/a>, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;left&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, tooltip time!\\&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   href=\"#example\" title=\"Yeah, tooltip time!\" >Curabitur blandit<\/a> tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;bottom&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, tooltip time!\\&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   href=\"#example\" title=\"Yeah, tooltip time!\" >Cum sociis<\/a> natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.<\/p>\n<a  class=\"x-btn x-btn-block\" style=\"margin-bottom: 1.313em;\" href=\"#example\" title=\"I told you so!\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   data-options=\"thumbnail: ''\">You Can Even Add Popovers and Tooltips to Me!<\/a>\n<p> <a  class=\"x-img x-img-link x-img-thumbnail right\"  href=\"#example\" title=\"Check Me Out!\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;popover&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;Enter in some more information here.&quot;}\"   data-options=\"thumbnail: '\/\/theme.co\/media\/x-popover-tooltip-example.jpg'\"><img src=\"\/\/theme.co\/media\/x-popover-tooltip-example.jpg\" alt=\"Example\"><\/a> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucib Lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;popover&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, popover time!\\&quot;&quot;,&quot;content&quot;:&quot;Place a little extra content in here for informational purposes.&quot;}\"   href=\"#example\" title=\"Yeah, popover time!\" >vel augue<\/a> laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;popover&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;right&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, popover time!\\&quot;&quot;,&quot;content&quot;:&quot;Place a little extra content in here for informational purposes.&quot;}\"   href=\"#example\" title=\"Yeah, popover time!\" >egestas eget quam<\/a>. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;popover&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;left&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, popover time!\\&quot;&quot;,&quot;content&quot;:&quot;Place a little extra content in here for informational purposes.&quot;}\"   href=\"#example\" title=\"Yeah, popover time!\" >Curabitur blandit<\/a> tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. <a  class=\"x-extra\" data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;popover&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;bottom&quot;,&quot;title&quot;:&quot;title=\\&quot;Yeah, popover time!\\&quot;&quot;,&quot;content&quot;:&quot;Place a little extra content in here for informational purposes.&quot;}\"   href=\"#example\" title=\"Yeah, popover time!\" >Cum sociis<\/a> natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere. <\/p>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Code<\/span><\/h2>\n<pre  class=\"x-code\" ><code>[extra href=\"#example\" title=\"Yeah, tooltip time!\" info=\"tooltip\" info_place=\"top\" info_trigger=\"hover\"] Place your content here [\/extra]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[extra href=\"#example\" title=\"Yeah, tooltip time!\" info=\"popover\" info_place=\"top\" info_trigger=\"hover\" info_content=\"Place a little extra content in here for informational purposes.\" ] Place your content here [\/extra]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>href<\/strong>: input the URL you want the link to go to.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: title for the link. Doubles as the title for the tooltips and popovers.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>target<\/strong>: input &#8220;blank&#8221; to have the link open in a new window.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info<\/strong>: &#8220;popover,&#8221; or &#8220;tooltip.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info_place<\/strong>: &#8220;top,&#8221; &#8220;right,&#8221; &#8220;bottom,&#8221; or &#8220;left.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info_trigger<\/strong>: &#8220;hover,&#8221; &#8220;click,&#8221; or &#8220;focus.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info_content<\/strong>: place your extra content for the popover here.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. odio dui. Maecenas faucibus mollis interdum. , dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem &#8230; <\/p>\n<div><a href=\"https:\/\/demo.theme.co\/integrity-1\/shortcodes\/popovers-and-tooltip\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages\/305"}],"collection":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":1,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages\/305\/revisions"}],"predecessor-version":[{"id":7753,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages\/305\/revisions\/7753"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/integrity-1\/wp-json\/wp\/v2\/media?parent=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}