Colorbox燈箱按鈕上的HTML / JavaScript工具提示

Question

將HTML / JavaScript工具提示附加到Colorbox燈箱中的cboxPrevious和cboxNext按鈕的最簡單方法是什么？

為了顯示到目前為止我已經嘗試了什么，這里是從Colorbox主頁獲取的簡化的colorbox演示：

<html>
    <head>
    <title>Colorbox Example</title>
        <base href="http://www.jacklmoore.com/colorbox/example1/">
    <link rel="stylesheet" href="colorbox.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../jquery.colorbox.js"></script>
    <script>
     $(document).ready(function(){
         //Examples of how to assign the Colorbox event to elements
         $(".group1").colorbox({rel:'group1', current: 'hallo'.link("http://google.com") });             
     });

    </script>
    </head>
    <body>
    <h1>Colorbox Demonstration</h1>
    <p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
    <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
    <p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
    </body>
</html>

當您在瀏覽器中打開此頁面並單擊第一個鏈接時，您將獲得一個帶有箭頭的顏色框，用於顯示上一張和下一張圖像。 我想在這些按鈕上附加工具提示。

我知道如何在HTML中附加工具提示。 只需添加一個title屬性：

<span title="Tooltip text">Some text</span>

因此，我在JavaScript中進行了類似的嘗試，首先針對cbxCurrent文本：我修改了該行

$(".group1").colorbox(...

這樣它顯示為：

$(".group1").colorbox({rel:'group1', current: '<span title="Tooltip text">Some text</span>' });

這可行！ 但是，當我嘗試使用上previous按鈕時，它什么也沒做：

$(".group1").colorbox({rel:'group1', previous: '<span title="Tooltip text">Some text</span>' });

我想我必須將title屬性附加到cboxPrevious背景圖像上（因為使用的CSS文件顯示背景圖像包含箭頭，而文本被縮進了隱形狀態），但是我不知道如何在此附加工具提示JavaScript函數中的元素。

Answer 1

 $('MY_ID').colorBox({ onOpen: function() { $("#tt").tooltip("disable"); }, onClosed: function() { $("#tt").tooltip("enable"); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Colorbox燈箱按鈕上的HTML / JavaScript工具提示

問題描述

1 個解決方案

解決方案1
-1 2018-06-27 06:13:40

Colorbox燈箱按鈕上的HTML / JavaScript工具提示

問題描述

1 個解決方案

解決方案1 -1 2018-06-27 06:13:40

解決方案1
-1 2018-06-27 06:13:40