টুলটিপ প্লাগিন এর বাবহার

টুলটিপ প্লাগিন এর বাবহারঃ

টুলটিপ দুই ভাবে ব্যবহার করা যায়... প্লাগিন দিয়ে ও সিএসএস স্টাইল করে ।

 সিএসএস স্টাইল করে করলেঃ
---------------------
ধাপ--১   প্রথমে প্রয়োজন মত স্থানে html মারকাপ রেডি করতে হবে ।
-----
ধাপ--২  ইচ্ছে মত সিএসএস স্টাইল করতে হবে ।
-----

 প্লাগিন দিয়ে করলেঃ
--------------------
ধাপ--৩ পছন্দ মত টুলটিপ প্লাগিন ডাউনলোড করলাম । যেমনঃ tooltipster-master
-------
ধাপ--৪  সিএসএস লিঙ্ক করালাম ।  যেমনঃ <link rel="stylesheet" type="text/css" href="css/tooltipster.css" media="all" />
-------
ধাপ--৫  বডিতে 		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
                <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
টুলটিপ প্লাগিন ও jquery কল করলাম ।


উদাহরণঃ

 সিএসএস স্টাইল করে করলেঃ
=====================
html মারকাপ
----------
<!-- Tooltips Contact Start Here -->
			<div class="tooltips_content_area fix">
				<div class="tooltips_content_wrapper fix">
					<a href="#" title="Lorem Ipsum is simply dummy text of the">Tooltips</a>
					<a href="#" title="the printing and typesetting industry. Lorem">Tooltips 2</a>
					<a href="#" title="orem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make">Tooltips 3</a>
					<div class="jquery_tooltips fix">
						<a href="#" title="Lorem Ipsum is simply dummy text of the" class="tooltips">Tooltips</a>
						<a href="#" title="&lt;div class=&quot;tooltip_left fix&quot;&gt; &lt;img src=&quot;img/chele.jpg&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;tooltip_right fix&quot;&gt;&lt;strong&gt; This text is in bold case ! &lt;/strong&gt; &lt;p&gt; remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. &lt;/p&gt;&lt;/div&gt;" class="tooltips2">Tooltips 2</a>
						<a title="Right" class="tooltips3">Right</a>
						<a title="Left" class="tooltips4">Left</a>
						<a title="Bottom" class="tooltips5">Bottom</a>
						<a title="Top Right" class="tooltips6">Top Right</a>
						<a title="Bottom Right" class="tooltips7">Bottom Right</a>
					</div>
				</div>
			</div>
			<!-- Tooltips Contact Start Here -->
----------------------------------------------------------------------------------
 সিএসএস স্টাইলঃ
------------
/* Tooltips Style */
.tooltips_content_area{
    margin-top: 50px;
    margin-bottom: 50px;
}
.tooltips_content_wrapper{}
.tooltips_content_wrapper a{
    display: inline-block;
    padding: 12px 20px;
    margin-right: 20px;
    text-decoration: none;
    color: #fff;
    background: #000;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 5px;
    min-width: 200px;
    text-align: center;
    position: relative;
}
.jquery_tooltips {
}
.jquery_tooltips a{
    margin-top: 30px;
    cursor: pointer;
}
.tooltips_content_wrapper a:hover:before, .tooltips_content_wrapper a:hover:after {
    opacity: 1;
}
.tooltips_content_wrapper a:last-child{
    margin-right: 0px;
}
.tooltips_content_wrapper>a:before{
	content:attr(title);
	position: absolute;
	bottom: 100%;
	left: 50%;
	background: #333;
	text-transform: capitalize;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	display: block;
	margin-left: -110px;
	margin-bottom: 12px;
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity: 0;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
}
.tooltips_content_wrapper>a:after{
	content:'';
	display: block;
	position: absolute;
	left: 50%;
	bottom: 100%;
	border-top: 12px solid #333;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-left: -10px;
	opacity: 0;
	-webkit-transition: all .5s;
	transition: all .5s;
}
a.tooltips{
}
a.tooltips2{}
a.tooltips3{}
===========================================================================================================================================

 প্লাগিন দিয়ে করলেঃ
----------------
 সিএসএস স্টাইলঃ
-------------
/* This is how you would create a theme called "my-custom-theme": */
.mytooltips_theme {
	border-radius: 5px;
	border: 2px solid #333;
	background: #000;
	color: #fff;
	max-width:300px;
}
/* Use this next selector to style things like font-size and line-height: */
.mytooltips_theme .tooltipster-content {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
}
.mytooltips_theme .tooltipster-content .tooltip_left{
	float:left;
	width:40%;
	height:auto;
}
.mytooltips_theme .tooltipster-content .tooltip_left img{}
.mytooltips_theme .tooltipster-content .tooltip_right{
	float:left;
	width:56%;
	margin-left:4%;
	height:auto;
}
.mytooltips_theme .tooltipster-content .tooltip_right{}
.mytooltips_theme .tooltipster-content .tooltip_right strong{
	margin-bottom:10px;
}
.mytooltips_theme .tooltipster-content .tooltip_right p{}
----------------------------------------------------------------------

jquery কমান্ডঃ
-----------

// Tooltips js
$(document).ready(function() {
	$('a.tooltips').tooltipster();
	$('a.tooltips2').tooltipster({
		contentAsHTML: true,
		animation: 'grow',
		delay: 200,
		theme: 'mytooltips_theme',
		touchDevices: false,
		trigger: 'hover'
	});
	$('a.tooltips3').tooltipster({
		animation: 'fall',
		delay: 200,
		theme: 'mytooltips_theme',
		touchDevices: false,
		trigger: 'click',
		position: 'right',
	});
	$('a.tooltips4').tooltipster({
		animation: 'swing',
		delay: 200,
		theme: 'mytooltips_theme',
		touchDevices: false,
		trigger: 'click',
		position: 'left',
	});
	$('a.tooltips5').tooltipster({
		animation: 'slide',
		delay: 200,
		theme: 'mytooltips_theme',
		touchDevices: false,
		trigger: 'hover',
		position: 'bottom',
	});
	$('a.tooltips6').tooltipster({
		animation: 'fade',
		delay: 200,
		theme: 'mytooltips_theme',
		touchDevices: false,
		trigger: 'hover',
		position: 'top-right',
	});
	$('a.tooltips7').tooltipster({
		animation: 'fade',
		delay: 200,
		theme: 'mytooltips_theme',
		touchDevices: false,
		trigger: 'hover',
		position: 'bottom-right',
	});
});