Bootstrap Tooltip not working with SelectPicker DropDown Plugin in ASP.Net

Waghmare

SOLVED CLOSED ACTIVE ANSWERED
User: Waghmare
Posted: on Jun 22, 2018 03:30 AM
Forum: Bootstrap
Answer: 1
Views: 7771
Sample Code: Download

Hi,

I have a update panel on my page inside it i have taken selectpicker dropdown.

Tooltip dosent show on selectpicker dropdown.

And also after selectedindex event of dropdwon it dosent focuses on other control.

                           <div class="col-md-4 col-lg-4">
                                <div class="row">
                                    <asp:Label ID="lblVehAppAuth" runat="server" Text="Approver IN" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
                                    <div class="col-md-7 col-lg-7">
                                        <asp:DropDownList ID="drpVeh_IN_AppAuth" runat="server" CssClass="form-control input-sm" class="selectpicker" AutoPostBack="true"
                                            data-live-search="true" OnSelectedIndexChanged="drpVeh_IN_AppAuth_SelectedIndexChanged" data-toggle="tooltip" data-placement="top" title="Select IN Vehicle Approver">
                                        </asp:DropDownList>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 col-lg-4">
                                <div class="row">
                                    <asp:Label ID="lbp_Veh_Out" runat="server" Text="OUT" CssClass="control-label col-md-2 col-lg-2"></asp:Label>
                                    <div class="col-md-7 col-lg-7">
                                        <asp:DropDownList ID="drpVeh_OUT_AppAuth" runat="server" CssClass="form-control input-sm" class="selectpicker" AutoPostBack="true"
                                            data-live-search="true" OnSelectedIndexChanged="drpVeh_OUT_AppAuth_SelectedIndexChanged" data-toggle="tooltip" data-placement="top" title="Select OUT Vehicle Approver">
                                        </asp:DropDownList>
                                    </div>
                                </div>

        protected void drpVeh_IN_AppAuth_SelectedIndexChanged(object sender, EventArgs e)
        {
            drpVeh_OUT_AppAuth.Focus();
        }

        protected void drpVeh_OUT_AppAuth_SelectedIndexChanged(object sender, EventArgs e)
        {
            btnAddVehicle.Focus();
        }

    <script type="text/javascript">
        $(function () {
            pageLoad();
        });
        //On UpdatePanel Refresh
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    pageLoad();
                }
            });
        };
        function pageLoad() {
            $('[data-toggle="tooltip"]').tooltip()
        }
    </script>
    <!--End of Tooltip Script-->

    <script type="text/javascript">
        $(function () {
            ApplySelectPicker();
        });
        //On UpdatePanel Refresh
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ApplySelectPicker();
                }
            });
        };
        function ApplySelectPicker() {
               $('[id*=drpVeh_IN_AppAuth]').selectpicker({
                style: 'btn-default btn-sm btn-block',
                size: 6
            })

            $('[id*=drpVeh_OUT_AppAuth]').selectpicker({
                style: 'btn-default btn-sm btn-block',
                size: 6
            })
        };

Download FREE API for Word, Excel and PDF in ASP.Net

pandeyis...

0 2

Reply
ANSWER
User: pandeyism
Replied: on Jun 22, 2018 04:39 AM
Report

Hi Waghmare,

Inorder to display Tooltip you need to focus to the control on page load.

Check the modified code.

HTML

<script type="text/javascript">
    $(function () {
        ApplySelectPicker();
        ApplyToolTip();
        $('[id*=drpVeh_IN_AppAuth]').focus();
    });
    //On UpdatePanel Refresh
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                ApplySelectPicker();
                ApplyToolTip();
            }
        });
    };
    function ApplyToolTip() {
        $('[data-toggle="tooltip"]').tooltip();
    }
    function ApplySelectPicker() {
        $('[id*=drpVeh_IN_AppAuth]').selectpicker({
            style: 'btn-default btn-sm btn-block',
            size: 6
        });

        $('[id*=drpVeh_OUT_AppAuth]').selectpicker({
            style: 'btn-default btn-sm btn-block',
            size: 6
        });
    };
</script>
<div>
    <asp:ScriptManager ID="src" runat="server">
    </asp:ScriptManager>
    <br />
    <br />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="col-md-4 col-lg-4">
                <div class="row">
                    <asp:Label ID="lblVehAppAuth" runat="server" Text="Approver IN" CssClass="control-label col-md-5 col-lg-5"></asp:Label>
                    <div class="col-md-7 col-lg-7">
                        <asp:DropDownList ID="drpVeh_IN_AppAuth" runat="server" CssClass="form-control input-sm"
                            class="selectpicker" AutoPostBack="true" data-live-search="true" OnSelectedIndexChanged="drpVeh_IN_AppAuth_SelectedIndexChanged"
                            data-toggle="tooltip" data-placement="top" title="Select IN Vehicle Approver">
                            <asp:ListItem Text="Mango" Value="Mango"></asp:ListItem>
                            <asp:ListItem Text="Apple" Value="Apple"></asp:ListItem>
                            <asp:ListItem Text="Banana" Value="Banana"></asp:ListItem>
                            <asp:ListItem Text="Orange" Value="Orange"></asp:ListItem>
                        </asp:DropDownList>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="row">
                    <asp:Label ID="lbp_Veh_Out" runat="server" Text="OUT" CssClass="control-label col-md-2 col-lg-2"></asp:Label>
                    <div class="col-md-7 col-lg-7">
                        <asp:DropDownList ID="drpVeh_OUT_AppAuth" runat="server" CssClass="form-control input-sm"
                            class="selectpicker" AutoPostBack="true" data-live-search="true" OnSelectedIndexChanged="drpVeh_OUT_AppAuth_SelectedIndexChanged"
                            data-toggle="tooltip" data-placement="top" title="Select OUT Vehicle Approver">
                            <asp:ListItem Text="Mango" Value="Mango"></asp:ListItem>
                            <asp:ListItem Text="Apple" Value="Apple"></asp:ListItem>
                            <asp:ListItem Text="Banana" Value="Banana"></asp:ListItem>
                            <asp:ListItem Text="Orange" Value="Orange"></asp:ListItem>
                        </asp:DropDownList>
                    </div>
                </div>
            </div>
            <br />
            <asp:Button ID="btnAddVehicle" Text="Add Vehicle" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

protected void drpVeh_IN_AppAuth_SelectedIndexChanged(object sender, EventArgs e)
{
    drpVeh_OUT_AppAuth.Focus();
}

protected void drpVeh_OUT_AppAuth_SelectedIndexChanged(object sender, EventArgs e)
{
    btnAddVehicle.Focus();
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Bootstrap Tooltip not working with SelectPicker DropDown Plugin in ASP.Net

Company

Explore

Follow us

Contact Us