Book Image

Bootstrap Essentials

By : Snig Bhaumik
Book Image

Bootstrap Essentials

By: Snig Bhaumik

Overview of this book

<p>As the number of people using mobile devices to access the internet grows every moment, websites are no longer built just for desktop machines. The mobile first philosophy demands that sites are fully compatible with all the available, and predicted future mobile devices. Bootstrap allows and easily enables you to design and develop your own websites congenial to all devices, including e-readers, tablets, and so on.</p> <p>This book will familiarize you with all the features, functionalities, and architectural knowledge of the Bootstrap platform, enabling you to develop mobile friendly websites. You will begin by discovering the mobile first philosophy and what Bootstrap is. You will learn about Bootstrap’s architecture and components, and how to use Bootstrap using LESS. You will create responsive layouts using Bootstrap CSS and work with the packaged components that come along with Bootstrap. You will proceed to explore the various JavaScript components and add-ons offered by Bootstrap. Finally, you will learn how to customize Bootstrap easily to match your project-specific requirements,compile and build your Bootstrap code, and extend Bootstrap with different extensions to create more advanced websites.</p> <p>By the end of this book, you will be able to build, compile, and customize your own Bootstrap system to create mobile friendly websites.</p>
Table of Contents (15 chapters)
Bootstrap Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Tooltips and popovers


You would of course need tooltips for every user-friendly site you develop. Tooltips are more advanced versions of the title attributes you normally use in case of images. Here is a simple tooltip:

The HTML markup for this is shown as follows:

<a class="btn btn-info btn-sm" href="#" role="button" data-toggle="tooltip" data-placement="right" title="Open all items in this shop...">See all</a>

Of course, the data-toggle, data-placement, and title attributes options are only relevant in this context. You have four options (four directions essentially) for data-placement—top, right, bottom, and left. The tooltip will be displayed as per this attribute value.

However, you need to initialize the tooltip functionality in the page where you want to use it. This is because, unlike any other component, Bootstrap does not initialize this component by default. Here is the code for this—this you can include in the HTML page JS section itself:

$(document).ready(function ()...