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:
And this is the way how it looks in the Ripple Emulator , for Nexus Galaxy devices:
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">
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>
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.
The jQuery to enable the helpers is written this way :
<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">
<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>
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()":
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.
The jQuery to enable the helpers is written this way :
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 :
The displays for Nexus devices screens is as follows:
2- On Medium and Big desktops:
by Carmel Schvartzman
כתב: כרמל שוורצמן
No comments:
Post a Comment