Tuesday, August 4, 2015

Bootstrap Tutorial Lesson 10 - Tooltips and Popovers

In this Step by step Bootstrap Tutorial Lesson 10 - Tooltips and Popovers 
   we review this responsive helpers, which support CSS3 animations and local storage, by  building an Application for desktop computers and Mobile devices. This App will display several Popouts and Tooltips on text and controls .
This is how this is shown:
Bootstrap Tutorial Lesson 10 - Tooltips and Popovers


Bootstrap Tutorial Lesson 10 - Tooltips and Popovers    1


And this is the way how it looks in the Ripple Emulator , for Nexus Galaxy devices:    

Bootstrap Tutorial Lesson 10 - Tooltips and Popovers  2




Bootstrap Tutorial Lesson 10 - Tooltips and Popovers


You can start this app by using a free Bootstrap template from www.initializr.com/ (explained in this short post : Bootstrap Templates), or you can write this jQuery and Bootstrap references in the HTML5 file's Head:


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

Bootstrap Tutorial Lesson 10 - Tooltips and Popovers   3



Also put the following references before the </body> closing tag :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap Tutorial Lesson 10 - Tooltips and Popovers  4

To setup a Mobile Emulator, read this short tutorial on installing the FREE Ripple Emulator.


1) Using Bootstrap Tooltips in a responsive Web Page:


The Bootstrap supports elegant tooltips that you can display in four positions or placements: top - bottom - left - right. Do this by setting the data-placement directive. For performance reasons, the tooltips are not displayed by default. Instead, you must enable them programmatically using jQuery, by calling a special initialization method named ".tooltip()":

Bootstrap Tutorial Lesson 10 - Tooltips and Popovers   5


We'll see that method in the next steps.
All the Tooltip and Popover documentation can be found in the GetBootstrap Official Web Site.
The tooltips can be triggered not just by hovering them. You can set the property data-trigger and specify which event will open them (click, focus, etc).

2) Using Popovers in a Responsive Bootstrap Web Page:

The difference between the tooltips and the Bootstrap's Popovers are in the appearance only. The popovers can also open on mouse over , using the data-trigger="hover" attribute, as do the tooltips. They are also opened by clicking the control, if you use another trigger like "data-trigger=click".
To make the Popover dismissible, that means, that will be closed by the OnBlur event, add the data-trigger=focus.
You can set a Header, which will contain what you enter in the Title property.
The Content will be set in the data-content attribute.

Bootstrap Tutorial Lesson 10 - Tooltips and Popovers    6



The jQuery to enable the helpers is written this way :

Bootstrap Tutorial Lesson 10 - Tooltips and Popovers   7




This is the style for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    font: 900 17px Verdana;
    color: #a8a3a3;
}

h2 {
    font: 900 14px Verdana;
    color: #a8a3a3;
}

.well {
    font: 900 11px Comic Sans MS;
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}
.panel .row{
padding:20px;
text-align:center;
}
form {
padding:15px;}




That's all. Our Toolttips will be displayed this way:

1- In Mobile devices : 


Bootstrap Tutorial Lesson 10 - Tooltips





Bootstrap Tutorial Lesson 10





Bootstrap Tutorial











The displays for Nexus devices screens is as follows:

Bootstrap and Popovers




2- On Medium and Big desktops:


Bootstrap Tutorial  Tooltips and Popovers




Bootstrap Tutorial  Popovers




Bootstrap  Popovers








      by Carmel Schvartzman


כתב: כרמל שוורצמן