Simple Tooltip using Bootstrap | 2my4edge

29 November 2014

Simple Tooltip using Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. Bootstrap is Designed for everyone everywhere, Bootstrap has more facility and flexible for designers by just using bootstrap css and js, now i'll just explain simple tooltip using bootstrap.

bootstrap-tooltip-image


DOWNLOAD                         LIVE DEMO

What are file inside the bootstrap.?
Files inside bootstrap

Where we can get bootstrap.?
We can bootstrap file from http://getbootstrap.com/, from there we can get customize  the colors and all to develop your site with very color full. 

ONLINE LINKS FOR BOOTSTRAP
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

by using this above link we call call directly from bootstrap site, without downloading bootstrap. and the one more thing is we must have to add Jquery Plugin within this bootstrap.

TOOLTIP
i already posted one tooltip using jquery and litetooltip.js, take a look of that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right</button>


data-toggle="tooltip" data-placement="left/top/bottom/right" is for tooltip and the script is needed.

I hope this post is really helpful and useful to you. Thank you.


RELATED POSTS : 






No comments:

Post a Comment

^