Home > DeveloperSection > Forums > How to use jQuery tooltip on jQuery accordion
Goti Bandu

Total Post:119

Points:835
Posted on    December-18-2013 12:39 AM

 JQuery JQuery 
Ratings:


 1 Reply(s)
 1308  View(s)
Rate this:

Can anyone tell me how to use jQuery tooltip on jQuery accordion control?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

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

<head runat="server">

    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#Accord').accordion(

                {

                    create: function (event, ui) {

                        $('.ui-accordion-header').attr("disabled", true);

                    }

                });

        })

        $(document).tooltip();

    </script>

</head>

<body>

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

        <div class="row" id="Accord">

            <h2>Getting started</h2>

            <div class="col-md-4">

                <p>

                    ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.

            A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.

                </p>

                <p>

                    <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more &raquo;</a>

                </p>

            </div>

            <h2>Get more libraries</h2>

            <div class="col-md-4">

                <p>

                    NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.

                </p>

                <p>

                    <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more &raquo;</a>

                </p>

            </div>

            <h2>Web Hosting</h2>

            <div class="col-md-4">

                <p>

                    You can easily find a web hosting company that offers the right mix of features and price for your applications.

                </p>

                <p>

                    <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more &raquo;</a>

                </p>

            </div>

        </div>

    </form>

</body>

</html>

Above is my sample code. Please guide me how can I integrate tooltip with accordion? I want to get certain contents of panel on hovering mouse over the headers of accordion.



ezra heywood
ezra heywood

Total Post:145

Points:1019
Posted on    December-18-2013 1:19 AM

Hi Goti,

No need to use any plugin. just write it by yourself. you can put your content which you want to show up on hover in a custom attribute ( or for example rel attribute ) and get it's value and show it in an absolute positioned span generated by jquery.

for example :

HTML:

<h2 rel="YOUR CONTENT GOES HERE">Web Hosting</h2>

jquery:

$(function(){

    var ttContent = $('h2').attr('rel');

    $('h2').hover(function(){

        $(this).append('<span class="ttbox">' + ttContent + '</span>');

    },function(){

        $(this).children('.ttbox').remove();

    });

});

CSS:

h2 { position:relative; }

.ttbox { position:absolute; display:none; top:20px; width:200px; height:30px; display:block; background:#000; color:#fff; }


Don't want to miss updates? Please click the below button!

Follow MindStick