Tooltips

Example

Tooltips are used so that we can place the text or label or form left, right top down or center.

It is used by copying the code below, and then pastes it into your application or website. Before that, you can use our CSS and JS to make certain functionalities work for you. These are the addressees:

     
     <link rel="stylesheet" href="www.sensationenergy.com/se_css/se.css>
     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script  src="www.sensationenergy.com/js_css/se.js"></script>
     
     

Example 1

Example 2

Example 1

       
<div style="top: 10px;">	<b>Tooltip TOP</b></div>
<div align="left">	<b>Tooltip LEFT</b></div>
<div align="center">	<b>Tooltip CENTER</b></div>
<div align="right">	<b>Tooltip RIGHT</b></div>
<div style="top: 10px;">	<b>Tooltip BOTTOM</b></div>

Example 2

<div class="card">
<div class="tops">
<h3>Tooltip TOP</h3>
</div>
<br>
<div class="lefts">
<h3>Tooltip LEFT</h3>
</div>
<br>
<div class="centers">
<h3>Tooltip CENTER</h3>
</div>
<br>
<div class="rights">
<h3>Tooltip RIGHT</h3>
</div>
<br>
<div class="bottoms">
<h3>Tooltip BOTTOM</h3>
</div>

CSS

.centers {
top: 950px;
text-align: center;
border: 1px solid  #3D6AAD;
bottom: 100px;
}
.rights {
position: absolute;
top: 1040px;
right: 35px;
width: 180px;
height: 50px;
border: 1px solid  #3D6AAD;
}
.lefts {
border: 1px solid  #3D6AAD;
left: 150px;
width: 200px;
height: 50px;
}
.tops {
border: 1px solid  #3D6AAD;
top: 50px;
}
.bottoms {
border: 1px solid  #3D6AAD;
bottom: 0px;
}