How to use jQuery tooltip on jQuery accordion

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.

Solution

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; }

FIDDLE DEMO