View Demo Buy Now Our Portfolio

Navigation Style

Horizontal Left-menu

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu

Horizontalmenu Styles Mode

Color Menu
Light Menu
Dark Menu
Gradient-Color Menu
Loader
logo
View all Notification
3
See all Messages
img
English
flag-img
French
flag-img
Germany
flag-img
Italy
flag-img
Russia
flag-img
Spain
profile-user
Jacob Fisher
My Profile Edit Profile Account Settings Inbox Message Need help? Sign out

Tooltip and Popover

  1. Advanced Elements
  2. Tooltip and Popover
Add Order Add User

Static Tooltip

Interactive Demo Tooltip

<div class="row text-center">
	<div class="col-md-3 mt-2 mb-2">
		<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
	</div>
	<div class="col-md-3 mt-2 mb-2">
		<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
	</div>
	<div class="col-md-3 mt-2 mb-2">
		<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
	</div>
	<div class="col-md-3 mt-2 mb-2">
		<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
	</div>
</div>

Basic Popover

<div class="row text-center">
	<div class="col-sm-6 col-lg-3 mt-2 mb-2">
		<button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-popover-color="default" data-placement="top" title="Popover top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
			Popover top
		</button>
	</div><!-- col-3 -->
	<div class="col-sm-6 col-lg-3 mt-2 mb-2 ">
		<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-popover-color="default" data-placement="bottom" title="Popover bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
			Popover bottom
		</button>
	</div><!-- col-3 -->
	<div class="col-sm-6 col-lg-3 mt-2 mb-2">
		<button type="button" class="btn btn-cyan" data-container="body" data-toggle="popover" data-popover-color="default" data-placement="left" title="Popover left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
			Popover left
		</button>
	</div><!-- col-3 -->
	<div class="col-sm-6 col-lg-3 mt-2 mb-2">
		<button type="button" class="btn btn-purple" data-container="body" data-toggle="popover" data-popover-color="default" data-placement="right" title="Popover right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
			Popover right
		</button>
	</div><!-- col-3 -->
</div>
General Settings
Notifications
Show your emails
Show Task statistics
Show recent activity
System Logs
Error Reporting
Show your status to all
Keep up to date
Overview

Achieves80%

Projects60%

Earnings50%

Balance45%

Toatal Profits75%

Total Likes70%