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

Total Post:119

Posted on    December-18-2013 12:39 AM

 JQuery JQuery 

 1 Reply(s)
 1628  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">


    <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 () {



                    create: function (event, ui) {

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








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

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

            <h2>Getting started</h2>

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


                    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.



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



            <h2>Get more libraries</h2>

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


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



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



            <h2>Web Hosting</h2>

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


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



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







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

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 :


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



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


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






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