Tab Toggle Tooltip

Tabset

[tabset] [tab_labels] [tab_label] [tab_contents] [tab_content] [/tabset]
Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.
Suspendisse id iaculis dolor. Praesent sollicitudin, massa non mollis semper, felis nibh sollicitudin odio, vel sollicitudin orci elit nec velit.
Ut viverra semper magna, ac congue est imperdiet ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac mauris tortor. Cras eros tellus, congue sit amet pulvinar id, semper vitae est. Cras pretium, justo et viverra dignissim, libero sem blandit tortor, ac euismod libero mi ut leo tempus.
Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi.
Suspendisse id iaculis dolor. Praesent sollicitudin, massa non mollis semper, felis nibh sollicitudin odio, vel sollicitudin orci elit nec velit. Duis non venenatis risus. Suspendisse non odio nisl, in sodales lectus. Phasellus mi sem, aliquet ac cursus nec, sollicitudin a est. Pellentesque posuere.
Ut viverra semper magna, ac congue est imperdiet ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac mauris tortor. Cras eros tellus, congue sit amet pulvinar id, semper vitae est. Cras pretium, justo et viverra dignissim, libero sem blandit tortor, ac euismod libero mi ut leo tempus.
Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.
Suspendisse id iaculis dolor. Praesent sollicitudin, massa non mollis semper, felis nibh sollicitudin odio, vel sollicitudin orci elit nec velit. Duis non venenatis risus. Suspendisse non odio nisl, in sodales lectus. Phasellus mi sem, aliquet ac cursus nec, sollicitudin a est. Pellentesque posuere.
Ut viverra semper magna, ac congue est imperdiet ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac mauris tortor. Cras eros tellus, congue sit amet pulvinar id, semper vitae est. Cras pretium, justo et viverra dignissim, libero sem blandit tortor, ac euismod libero mi ut leo tempus.
Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.
Suspendisse id iaculis dolor. Praesent sollicitudin, massa non mollis semper, felis nibh sollicitudin odio, vel sollicitudin orci elit nec velit. Duis non venenatis risus. Suspendisse non odio nisl, in sodales lectus. Phasellus mi sem, aliquet ac cursus nec, sollicitudin a est. Pellentesque posuere.
[tabset]
    [tab_labels]
        [tab_label]content...[/tab_label]
        [tab_label]content...[/tab_label]
    [/tab_labels]
    [tab_contents]
        [tab_content]content...[/tab_content]
        [tab_content]content...[/tab_content]
    [/tab_contents]
[/tabset]

[tabset skin="green" tab_align="left"] ... [/tabset]

[tabset skin="orange" tab_align="justify"] ... [/tabset]

[tabset skin="blue" tab_align="justify_and_gaps"] ... [/tabset]

Vertical Tabset

Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id. Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.Proin a nulla vitae nisl luctus mattis. Nullam scelerisque erat eget justo viverra mattis. Ut sit amet urna ac velit auctor ullamcorper. Pellentesque convallis, ante non porta vulputate, dolor mauris elementum erat, non interdum ligula sem a mi. Vivamus ipsum dolor, congue a imperdiet et, tempus id.
Suspendisse id iaculis dolor. Praesent sollicitudin, massa non mollis semper, felis nibh sollicitudin odio, vel sollicitudin orci elit nec velit. Duis non venenatis risus. Suspendisse non odio nisl, in sodales lectus. Phasellus mi sem, aliquet ac cursus nec, sollicitudin a est. Pellentesque posuere.Suspendisse id iaculis dolor. Praesent sollicitudin, massa non mollis semper, felis nibh sollicitudin odio, vel sollicitudin orci elit nec velit. Duis non venenatis risus. Suspendisse non odio nisl, in sodales lectus. Phasellus mi sem, aliquet ac cursus nec, sollicitudin a est. Pellentesque posuere.Suspendisse id iaculis dolor. Praesent sollicitudin, massa non mollis semper, felis nibh sollicitudin odio, vel sollicitudin orci elit nec velit. Duis non venenatis risus. Suspendisse non odio nisl, in sodales lectus. Phasellus mi sem, aliquet ac cursus nec, sollicitudin a est. Pellentesque posuere.
Mauris rutrum tincidunt augue non eleifend. Vestibulum ornare ligula ut justo dignissim vulputate pharetra nunc semper. Praesent id sodales neque. Integer non odio erat. In hac habitasse platea dictumst. Nullam nibh ligula, adipiscing at mollis at, suscipit eget tellus. Donec quis eros ac cras amet. Mauris rutrum tincidunt augue non eleifend. Vestibulum ornare ligula ut justo dignissim vulputate pharetra nunc semper. Praesent id sodales neque. Integer non odio erat. In hac habitasse platea dictumst. Nullam nibh ligula, adipiscing at mollis at, suscipit eget tellus. Donec quis eros ac cras amet. Mauris rutrum tincidunt augue non eleifend. Vestibulum ornare ligula ut justo dignissim vulputate pharetra nunc semper. Praesent id sodales neque. Integer non odio erat. In hac habitasse platea dictumst. Nullam nibh ligula, adipiscing at mollis at, suscipit eget tellus. Donec quis eros ac cras amet.
[tabset type="vertical" autoplay="true"]
    [tab_labels]
        [tab_label]content...[/tab_label]
        [tab_label]content...[/tab_label]
        [tab_label]content...[/tab_label]
    [/tab_labels]
    [tab_contents]
        [tab_content]content...[/tab_content]
        [tab_content]content...[/tab_content]
        [tab_content]content...[/tab_content]
    [/tab_contents]
[/tabset]

Toggle

[toggle] [toggle_title] [toggle_content] [/toggle]
Single Toggle
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle open="true"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]
Faster Collapsing/Expanding
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle duration="200"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]
Different toggle titles when the toggle is open and closed
Click to close
Click to open
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle]
[toggle_title_open]Click to close[/toggle_title_open]
[toggle_title_closed]Click to open[/toggle_title_closed]
[toggle_content]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[/toggle_content]
[/toggle]
Multiple toggle titles
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
[toggle]
[toggle_title]Click to toggle[/toggle_title]

[toggle_content]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[/toggle_content]

[toggle_title]Click to toggle[/toggle_title]
[/toggle]
Multiple toggle contents
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle]

[toggle_content]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[/toggle_content]

[toggle_title]Click to toggle[/toggle_title]

[toggle_content]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae elementum leo. Ut tincidunt dictum facilisis.
Vestibulum ante ipsum primis in faucibus orci luctus et
[/toggle_content]

[/toggle]
Custom Toggle Icon
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle open_icon="arrow-down" closed_icon="arrow-right"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]
Totally Custom Toggle
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Shortcode:
[toggle open_icon="arrow-down" closed_icon="arrow-right" class="myToggle"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]
CSS:
.myToggle .toggle_title {
	font-size: 20px !Important;
	background-color: green !Important;
	background-image: none !Important;
}

.myToggle .toggle_title.open {
	color: white !Important;
}

.myToggle .toggle_title.closed {
	color: yellow !Important;
}

.myToggle .toggle_title.open > *[data-icon-open]:before {
	color: #00ff00 !Important;
}

.myToggle .toggle_title.closed > *[data-icon-closed]:before {
	color: orange !Important;
}
Toggle Group - Accordion - one toggle is always open
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle group="max1min1"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

[toggle group="max1min1" open="true"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

[toggle group="max1min1"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]
Toggle Group - at most one toggle can be open
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle_group group="max1min0" minopen="0"]

[toggle group="max1min0"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

[toggle group="max1min0"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

[toggle group="max1min0"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]
Toggle Group - at most two toggles can be open
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
Click to toggle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae elementum leo. Ut tincidunt dictum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et
[toggle_group group="max2min0" maxopen="2" minopen="0"]

[toggle group="max2min0"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

[toggle group="max2min0"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

[toggle group="max2min0"]
    [toggle_title]title...[/toggle_title]
    [toggle_content]content...[/toggle_content]
[/toggle]

Tooltip

[tooltip] [/tooltip]
Move the mouse over this text.
[tooltip]
    [tooltip_over]Move the mouse over this text.[/tooltip_over]
    [tooltip_content]This is a tooltip.[/tooltip_content]
[/tooltip]

Extended Tooltip

Extended tooltip
[tooltip delayhide="1000"]
    [tooltip_over]title...[/tooltip_over]
    [tooltip_content]HTML content[/tooltip_content]
[/tooltip]

Tooltip direction:

tooltip direction up
[tooltip direction="up"]
    [tooltip_over]title...[/tooltip_over]
    [tooltip_content]content...[/tooltip_content]
[/tooltip]
tooltip direction right
[tooltip direction="right"]
    [tooltip_over]title...[/tooltip_over]
    [tooltip_content]content...[/tooltip_content]
[/tooltip]

Custom Tooltip:

open a custom tooltip
[tooltip direction="up"]
    [tooltip_over]title...[/tooltip_over]
    [tooltip_content frameclass="myTooltip"]content...[/tooltip_content]
[/tooltip]
The CSS for custom tooltip:
.myTooltip .dottoro_tooltip_content {background-color:#3198d9;}
.myTooltip.dottoro_tooltip_up .dottoro_tooltip_arrow {border-top-color:#3198d9}