Shortcode – Popover & Tooltips 2014-10-02T07:49:36+00:00
[sh_header size=”h4″ color=”#555555″ colorchange=”enable” header=”Popovers and Tooltips” type=”underline”]Use [sh_popover placement=”top” title=”Oh…And Style Them” pcontent=”Credence Popovers give you powerful styling control, so use the colors you want! ” trigger=”hover” colorchange=”enable” titlecolor=”#fff” titlebgcolor=”rgb(231, 76, 60)” fontcolor=”#6D6D6D” bgcolor=”#fff” bordercolor=”rgb(231, 76, 60)”]Popovers [/sh_popover] and [sh_tooltip placement=”bottom” title=”Here’s a tip!”]Tooltips[/sh_tooltip] in your content[/sh_header]
[sh_headerdouble size=”h4″]Tooltips[/sh_headerdouble]
[sh_callout callouttype=”flip” title=”Tooltips are great!” bordercolor=”rgba(25,25,25,0.15)” bordersize=”1px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” icon=”fa fa-comment” iconfontcolor=”#ffffff” iconbgcolor=”#555555″ fliptext=”Tooltips can be set to the top, left, right, or bottom of an element. Use them where you need them!” buttontext=”Ready To Buy?”]Tooltips can be used to add more information to other elements.[/sh_callout]

Lorem [sh_tooltip placement=”left” title=”Here’s a mighty fine tooltip!”]Here’s a left one[/sh_tooltip] sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut [sh_tooltip placement=”right” title=”Here’s a mighty fine tooltip!”]Here’s a right one[/sh_tooltip] enim ad minim veniam, quis nostrud exercitation [sh_tooltip placement=”top” title=”Here’s a mighty fine tooltip!”]Tooltip above[/sh_tooltip] ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore [sh_tooltip placement=”bottom” title=”Here’s a mighty fine tooltip!”]Here’s one below[/sh_tooltip] eu fugiat nulla pariatur.

[shvc_tooltip placement=”top” title=”Tooltips can be used on other items!”][sh_alert close=”enable” enablefont=”enable” icon=”fa fa-thumbs-o-up” type=”info”]Even this Alert Box has a tooltip attached to it![/sh_alert][/shvc_tooltip]
[sh_headerdouble size=”h4″]Popovers[/sh_headerdouble]
[sh_pullquote side=”left”]Set Them on the top, bottom, left, and right of an element.[/sh_pullquote]

Lorem ipsum dolor sit amet, [sh_popover placement=”left” title=”Popovers are Powerful” pcontent=”Choose the side to display your popover. Top, Bottom, Left and Right.” trigger=”hover” colorchange=”enable” titlecolor=”#6D6D6D” titlebgcolor=”#F7F7F7″ fontcolor=”#6D6D6D” bgcolor=”#fff” bordercolor=”rgba(0,0,0,0.25)”] Left Popover[/sh_popover] consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, [sh_popover placement=”top” title=”Popovers are Powerful” pcontent=”Choose the side to display your popover. Top, Bottom, Left and Right.” trigger=”hover” colorchange=”enable” titlecolor=”#6D6D6D” titlebgcolor=”#F7F7F7″ fontcolor=”#6D6D6D” bgcolor=”#fff” bordercolor=”rgba(0,0,0,0.25)”] Popover Top [/sh_popover] consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, [sh_popover placement=”right” title=”Popovers are Powerful” pcontent=”Choose the side to display your popover. Top, Bottom, Left and Right.” trigger=”hover” colorchange=”enable” titlecolor=”#6D6D6D” titlebgcolor=”#F7F7F7″ fontcolor=”#6D6D6D” bgcolor=”#fff” bordercolor=”rgba(0,0,0,0.25)”] Popover Right [/sh_popover] consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, [sh_popover placement=”bottom” title=”Popovers are Powerful” pcontent=”Choose the side to display your popover. Top, Bottom, Left and Right.” trigger=”hover” colorchange=”enable” titlecolor=”#6D6D6D” titlebgcolor=”#F7F7F7″ fontcolor=”#6D6D6D” bgcolor=”#fff” bordercolor=”rgba(0,0,0,0.25)”] Popover Below [/sh_popover] consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[sh_pullquote side=”left”]Use Them over images or other elements.[/sh_pullquote]
[shvc_popover placement=”right” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”hover” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[/shvc_popover]
[shvc_popover placement=”bottom” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”hover” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[/shvc_popover]
[shvc_popover placement=”left” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”hover” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[/shvc_popover]
[shvc_popover placement=”top” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”hover” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[/shvc_popover]
[sh_pullquote side=”left”]Choose to have them trigger on click or hover.[/sh_pullquote]
[shvc_popover placement=”right” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[/shvc_popover]
[shvc_popover placement=”bottom” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[/shvc_popover]
[shvc_popover placement=”left” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[
/shvc_popover]
[shvc_popover placement=”top” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” colorchange=”disable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”rgba(0,0,0,0.25)” title=”Use them on Images”]
[/shvc_popover]
[sh_pullquote side=”left”]Style borders, title font and background, and text font and background.[/sh_pullquote]
[shvc_popover placement=”right” pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” trigger=”hover” colorchange=”enable” titlecolor=”#ffffff” titlebgcolor=”#16a085″ fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”#16a085″ title=”Style them how you want”]
[/shvc_popover]
[shvc_popover placement=”bottom” pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” trigger=”hover” colorchange=”enable” titlecolor=”#ffffff” titlebgcolor=”#3498db” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”#3498db” title=”Style them how you want”]
[/shvc_popover]
[shvc_popover placement=”left” pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” trigger=”hover” colorchange=”enable” titlecolor=”#ffffff” titlebgcolor=”#34495e” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”#34495e” title=”Style them how you want”]
[/shvc_popover]
[shvc_popover placement=”top” pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” trigger=”hover” colorchange=”enable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#ffffff” bgcolor=”#f39c12″ bordercolor=”#f39c12″ title=”Style them how you want”]
[/shvc_popover]
[sh_headerdouble size=”h4″]Options[/sh_headerdouble]
[shvc_checklist type=”unordered” icon=”fa fa-angle-right” background=”enable”][shvc_checklist_item]Popovers – Hover or Click activated[/shvc_checklist_item][shvc_checklist_item]Popovers – Shortcode Generator or Visual Composer[/shvc_checklist_item][shvc_checklist_item]Popovers can be any color[/shvc_checklist_item][/shvc_checklist]
[shvc_checklist type=”unordered” icon=”fa fa-angle-right” background=”enable”][shvc_checklist_item]Tooltips – Top, Right, Bottom, and Left of element[/shvc_checklist_item][shvc_checklist_item]Tooltips – Can be used on Text, Images, and more[/shvc_checklist_item][shvc_checklist_item]Tooltips – accessible in Shortcodes and Visual Composer[/shvc_checklist_item][/shvc_checklist]