Buttons with Tooltips

Using FontAwesome to make visual cues on the fly.

by Rynne Cowham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<table id="reports" class="table table-bordered table-hover table-condensed table-responsive">
		<thead>
			<tr>
				<th>Report</th>
				<th>Recipients</th>
				<th class="nowrap">Actions</th>
			</tr>
		</thead>
		<tbody>
		
			<tr>
				<td>Test Report</td>
				<td>['[email protected]']</td>
				<td class="nowrap">
					<div class="buttons center">
						<a href="#"><i class="fa fa-edit fa-lg text-primary" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"></i></a>
						<a href="#"><i class="fa fa-times-circle fa-lg text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"></i></a>
						<a href="#"><i class="fa fa-send-o fa-lg text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Send Now"></i></a>
					</div>  
				</td>
			</tr>
		
			<tr>
				<td>SEO Updates</td>
				<td>['[email protected]', '[email protected]']</td>
				<td class="nowrap">
					<div class="buttons center">
						<a href="#"><i class="fa fa-edit fa-lg text-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"></i></a>
						<a href="#"><i class="fa fa-times-circle fa-lg text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"></i></a>
						<a href="#"><i class="fa fa-send-o fa-lg text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Send Now"></i></a>
					</div>  
				</td>
			</tr>
		
			<tr>
				<td>Broken Links</td>
				<td>['[email protected]', '[email protected]']</td>
				<td...

CSS

body {padding:20px;}
body, div, form, button, input, span, p, table, td {font-size:14px;}
.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
select, input {width:300px;}
.btn-submit, .btn-cancel {width:123px;}
h1, h2, h3, h4 {margin-bottom:20px;}

#main {max-width: 4000px;}
.nodata {margin-left:2.8em;}
.container, .row {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 25%;
	transform: translate(-50%, -50%);
}
#screentitle h3 {height:auto; margin:0; padding:20px 0; 
	background:transparent url('/static/assets/img/greenarrow2.png') 110px -6px no-repeat; background-size:auto 60px;}
.account-wall, .navbar {border-top:3px solid #31708f;}
.navbar-right li a {padding-left:0.25em; padding-right:0.25em;}
.navbar-right li:last-child {padding-right:1em;}

#reports {width:99%; border:none; border-radius:8px; -webkit-border-radius:8px;}
#reports th {background-color:#f3f3f3; border:none; border-top:1px solid #ccc;
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(238,238,238,1) 44%, rgba(238,238,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(44%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 44%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 44%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 44%,rgba(238,238,238,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(238,238,238,1) 44%,rgba(238,238,238,1) 100%); /* W3C */}
#reports td {border-right:none; border-left:none;}
#reports.table-hover>tbody>tr:hover>td,#reports.table-hover>tbody>tr:hover>th{background-color:#deefff}

.form-signin{max-width:330px; margin:0 auto;...

JavaScript

$(document).ready(function() {
    $('.buttons .fa').tooltip();
});