Tooltips & Popovers

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Tooltips”}

This is a basic example of the Tooltips, they are working with Shortcodes.

{spacer height=”40px”}

Vivamus {tooltip link=”#” text=”default Tooltip” title=”Hello I am a Tooltip”} lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis {tooltip link=”#” text=”Tooltip” title=”Hello I am a Tooltip on the top side, awesome, right!”} euismod semper.

Integer posuere erat a ante {tooltip link=”#” text=”Tooltip” title=”I am a Tooltip on the top”} venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis {tooltip link=”#” text=”Tooltip” title=”Hello I am a Tooltip on the top”} natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Vestibulum id ligula porta felis euismod semper. Donec {tooltip link=”#” text=”Tooltip with much Text” title=”Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod.”} ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta  {tooltip link=”#” text=” Tooltip with much more Text” title=”Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. “} ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

{spacer height=”20px”} {toggle1 title=”Shortcode”}

{tooltip text="Text here" title="Content here"} {tooltip text="Text here" title="Content here" link="http://www.google.de"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Popovers”}

This is a basic example of the Popover Shortcode.

{spacer height=”40px”}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”left” text=”Popover Left”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”Popover Top”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Bottom” position=”bottom” text=”Popover Bottom”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”right” text=”Popover Right”}

{divider-circle-big-left class=”mt30 mb40″}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”left” text=”Popover Left” class=”btn btn-default”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”Popover Top” class=”btn btn-primary”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Bottom” position=”bottom” text=”Popover Bottom” class=”btn btn-danger”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”right” text=”Popover Right” class=”btn btn-success”}

{divider-circle-big-left class=”mt30 mb40″}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”“}

{spacer height=”30px”} {toggle1 title=”Shortcode”}

Default Example {popover content="Content" title="Title" position="top" text="Click me"}  Button Example {popover content="Content" title="Title" position="top" text="Click me" class="btn btn-default"} 

{/toggle}

Posted on by GM in Elements Leave a comment

Add a Comment