如何在 jQuery 手风琴上使用 jQuery 工具提示答案

【问题标题】：How to use jQuery tooltip on jQuery accordion如何在 jQuery 手风琴上使用 jQuery 工具提示
【发布时间】：2014-01-04 08:13:35
【问题描述】：

谁能告诉我如何在 jQuery 手风琴控件上使用 jQuery 工具提示？

<%@ 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>

以上是我的示例代码。请指导我如何将工具提示与手风琴集成？我想在将鼠标悬停在手风琴标题上时获取面板的某些内容。

【问题讨论】：

顺便说一句，它被称为 jQuery。

标签： c# jquery tooltip accordion

【解决方案1】：

无需使用任何插件。自己写吧。您可以将要在悬停时显示的内容放在自定义属性（或例如 rel 属性）中，并获取它的值并将其显示在 jquery 生成的绝对定位范围中。

例如：

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

【讨论】：

不错的建议。当他们的标题被禁用时，我可以在手风琴面板上使用相同的东西吗？我还需要显示来自各个内容面板的数据，这可能吗？
是的，您可以在任何您想要的地方执行此操作。 “各自的内容”是指您希望 jquery 自动获取您的部分内容并将其放入工具提示框中？
每个手风琴标题都有一个关联的面板。相应的内容是指内容面板中的数据。能给个例子或者demo代码吗？
谢谢。它正是我正在寻找的。只有最后一件事。我在手风琴中转换了您的 jsfiddle 代码并禁用了标题，然后它就不起作用了。有什么想法吗？
你能给我提琴吗？我应该检查一下你的手风琴 css 和 jquery 代码之间的冲突。