[vc_row][vc_column][sh_header size=”h4″ header=”Popovers and Tooltips” colorchange=”enable” color=”#555555″ barwidth=”50px” barcolor=”#e74c3c”]
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][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][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” buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconfontcolor=”#ffffff” iconbgcolor=”#555555″ icon=”fa fa-comment” 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][/vc_column][vc_column width=”2/3″][vc_column_text]
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.
[/vc_column_text][shvc_tooltip title=”Tooltips can be used on other items!”][sh_alert close=”enable” enablefont=”enable” type=”info” icon=”fa fa-thumbs-o-up”]
Even this Alert Box has a tooltip attached to it!
[/sh_alert][/shvc_tooltip][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][sh_headerdouble size=”h4″]
Popovers
[/sh_headerdouble][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][sh_pullquote]
Set Them on the top, bottom, left, and right of an element.
[/sh_pullquote][/vc_column][vc_column width=”1/6″][vc_column_text]
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.
[/vc_column_text][/vc_column][vc_column width=”1/6″][vc_column_text]
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.
[/vc_column_text][/vc_column][vc_column width=”1/6″][vc_column_text]
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.
[/vc_column_text][/vc_column][vc_column width=”1/6″][vc_column_text]
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.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][sh_pullquote]
Use Them over images or other elements.
[/sh_pullquote][/vc_column][vc_column width=”1/6″][shvc_popover placement=”right” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” title=”Use them on Images”][vc_single_image image=”265″][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover placement=”bottom” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” title=”Use them on Images”][vc_single_image image=”271″ css=”.vc_custom_1412236523591{margin-bottom: -20px !important;}”][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover placement=”left” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” title=”Use them on Images”][vc_single_image image=”264″][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover pcontent=”Go on, use Popovers on Images or many other elements of your choice.” title=”Use them on Images”][vc_single_image image=”270″][/shvc_popover][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][sh_pullquote]
Choose to have them trigger on click or hover.
[/sh_pullquote][/vc_column][vc_column width=”1/6″][shvc_popover placement=”right” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” title=”Use them on Images”][vc_single_image image=”265″][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover placement=”bottom” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” title=”Use them on Images”][vc_single_image image=”271″ css=”.vc_custom_1412236559417{margin-bottom: -20px !important;}”][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover placement=”left” pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” title=”Use them on Images”][vc_single_image image=”264″][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover pcontent=”Go on, use Popovers on Images or many other elements of your choice.” trigger=”click” title=”Use them on Images”][vc_single_image image=”270″][/shvc_popover][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][sh_pullquote]
Style borders, title font and background, and text font and background.
[/sh_pullquote][/vc_column][vc_column width=”1/6″][shvc_popover placement=”right” pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” colorchange=”enable” titlecolor=”#ffffff” titlebgcolor=”#16a085″ fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”#16a085″ title=”Style them how you want”][vc_single_image image=”265″][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover placement=”bottom” pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” colorchange=”enable” titlecolor=”#ffffff” titlebgcolor=”#3498db” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”#3498db” title=”Style them how you want”][vc_single_image image=”271″ css=”.vc_custom_1412236592701{margin-bottom: -20px !important;}”][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover placement=”left” pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” colorchange=”enable” titlecolor=”#ffffff” titlebgcolor=”#34495e” fontcolor=”#6d6d6d” bgcolor=”#ffffff” bordercolor=”#34495e” title=”Style them how you want”][vc_single_image image=”264″][/shvc_popover][/vc_column][vc_column width=”1/6″][shvc_popover pcontent=”Style Borders, Title Color, Text Color, Title Background, and Text Background.” colorchange=”enable” titlecolor=”#6d6d6d” titlebgcolor=”#ffffff” fontcolor=”#ffffff” bgcolor=”#f39c12″ bordercolor=”#f39c12″ title=”Style them how you want”][vc_single_image image=”270″][/shvc_popover][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row css=”.vc_custom_1440092989712{margin-bottom: 0px !important;}”][vc_column css=”.vc_custom_1440093018075{margin-bottom: -10px !important;}”][shvc_colorbg backgroundcolor=”#eeeeee” fontcolor=””][vc_empty_space][sh_headerdouble size=”h4″]
Options
[/sh_headerdouble][vc_row_inner][vc_column_inner width=”1/2″][shvc_checklist iconset=”linear” iconlinear=”icon-check-square”][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][/vc_column_inner][vc_column_inner width=”1/2″][shvc_checklist iconset=”linear” iconlinear=”icon-check-square”][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][/vc_column_inner][/vc_row_inner][vc_empty_space][/shvc_colorbg][/vc_column][/vc_row]