استفاده از bootstrap tooltip در Asp.net

در این مقاله قصد داریم چگونگی پیاده سازی و یا استفاده ازtwitter bootstrap tooltip در Asp.Net را با مثال بیان کنیم . در اینجا از برخی ویژگی های مهم بوت استرپ tooltip ،مانند title ، data-placement ، data-trigger ، data-html و غیره استفاده میکنیم .

یک tooltip اساسا یک متن است که هنگام قرارگیری اشاره گر ماوس روی متن و یا کنترل ، جزئیات و یا توضیحاتی را نشان میدهد. روش های مختلفی برای نشان دادن tooltip وجود دارد اما در اینجا با استفاده از bootstrap tooltip(راهنمای ابزار بوت استرپ) نمونه های زیر ایجاد کرده ایم.

از bootstrap tooltip در تگهای HTML ، و کنترلهای Asp.Net نظیر: label و button استفاده میکنیم. آن را می توان در هر HTML و کنترل Asp.Net اضافه کرد.

برای پیاده سازی صفحه زیر در ابتدا یک صفحه وب ایجاد میکنیم.

و کدهای زیر را در آن وارد میکینم.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




    <script type="text/javascript">

//Initialize tooltip with jQuery

        $(document).ready(function () {

            $('.tooltips').tooltip();

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div style="margin: 50px">

            <b>Tooltip on achor tag:</b>

            <a href="#" class="tooltips" data-placement="top" title="Tooltip on top">Top tooltip</a>

            <a href="#" class="tooltips" data-placement="bottom" title="Tooltip on bottom">Bottom tooltip</a>

            <a href="#" class="tooltips" data-placement="left" title="Tooltip on left">Left tooltip</a>

            <a href="#" class="tooltips" data-placement="right" title="Tooltip on right">Right tooltip</a>

            <br />

            <br />

            <br />

            <b>Tooltip on Buttons:</b>

            <asp:Button ID="btnTop" runat="server" Text="Top tooltip" CssClass="btn btn-success btn-sm tooltips" data-placement="top" title="Tooltip on top" />

            <asp:Button ID="btnBottom" runat="server" Text="Bottom tooltip" CssClass="btn btn-warning btn-sm tooltips" data-placement="bottom" title="Tooltip on bottom" />

            <asp:Button ID="btnLeft" runat="server" Text="Left tooltip" CssClass="btn btn-info btn-sm tooltips" data-placement="left" title="Tooltip on left" />

            <asp:Button ID="btnRight" runat="server" Text="Right tooltip" CssClass="btn btn-danger btn-sm tooltips" data-placement="right" title="Tooltip on right" />

            <br />

            <br />

            <br />

            <b>Tooltip on Labels:</b>

            <asp:Label ID="lblTop" runat="server" Text="Top tooltip" CssClass="tooltips" data-placement="top" title="Tooltip on top"></asp:Label>

            <asp:Label ID="lblBottom" runat="server" Text="Bottom tooltip" CssClass="tooltips" data-placement="bottom" title="Tooltip on bottom"></asp:Label>

            <asp:Label ID="lblLeft" runat="server" Text="Left tooltip" CssClass="tooltips" data-placement="left" title="Tooltip on left"></asp:Label>

            <asp:Label ID="lblRight" runat="server" Text="Right tooltip" CssClass="tooltips" data-placement="right" title="Tooltip on right"></asp:Label> 
            
            
           
        </div>

    </form>

</body>

</html>

برای اعمال tooltip در کنترل های HTML نیاز به اضافه کردن "class = "tooltips و در صورت استفاده از کنترل Asp.Net مانند نمونه بالا "CssClass = "tooltips را اضافه میکنیم.

صفات Tooltip:

title: متنی است که در tooltip ظاهر خواهد شد.

data-placement:

موقعیت Tooltip ها را می توان با استفاده از این ویژگی با قرار دادن مقادیر top, bottom, left , right, auto تنظیم کرد. در مثال بالا این موقعیتها در tooltip نشان داده شده اند.

اگر "data-placement= "auto right باشد ، tooltip را در سمت راست مرورگر نشان میدهد ،در غیر این صورت در سمت چپ نشان می دهد. و اگر" data-placement= "auto top باشد tooltip در بالای مرورگر نمایش میدهد در غیر این صورت در پایین نمایش داده میشود.
ویژگی data-placement به طور پیش فرض بالای متن قرار میگیرد.

data-trigger:

در رویداد show.To trigger tooltip با قرار دادن " data-attribute = " click با کلیک این رویداد فعال میشودو وقتی اشارگر موس روی tooltip قرار بگیرد، رویداد "data-placement = "hover اجرا میشود و برای فوکوس (به عنوان مثال فوکوس روی تب و یا کلیک ) "data-placement = "focus قرار میدهیم . همچنین می توانید از trigger های متعدد استفاده کنیم به عنوان مثال، "data-placement = " click hover .

مثال:

<a href="#" class="tooltips" title="Tooltip on click" data-placement="top" data-trigger="click">Click me</a>

<a href="#" class="tooltips" title="Tooltip on hover" data-placement="left" data-trigger="hover">Hover on me</a>

<a href="#" class="tooltips" title="Tooltip on focus through tab or click" data-placement="right" data-trigger="focus">Focus (tab or click)</a>

data-html :

اگر شما می خواهید از فرمت متن tooltip در تگهای HTML خود استفاده کنید ، باید data-html="true قرار دهید . این فرمت به پیش فرض false است.

مثال:

<asp:Button ID="btnToolTipDemo" runat="server" Text=”Tooltip Demo" CssClass="btn btn-success btn-sm tooltips" data-html="true" title="<b><i><u>HTML tags in Tooltip</u></i></b>" data-placement="top"  />

متن tooltip در مثال بالا italic، bold و underlined خواهد بود.

آموزش بوت استرپ

فایل های ضمیمه

4565_BootstrapExample.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

استفاده از bootstrap tooltip در Asp.net

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید