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.

jquery

Updated on 18-Dec-2013

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

Can you answer this question?

Answer

1 Answers

Anonymous User

18-Dec-2013

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:

CSS:

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

forum

How to use jQuery tooltip on jQuery accordion

Anonymous User

1 Answers

Liked By