2011-09-28 94 views
0

關閉按鈕,我想對qTip提示關閉按鈕 - 我有以下幾點:的jQuery qtip提示插件

<script type="text/javascript"> 
     $(document).ready(function() { 

      //****** tooltips ********** 
      $('img.help').hover(function() { 

      // Destroy currrent tooltip if present 
      if ($(this).data("qtip")) $(this).qtip("destroy"); 

      $(this) // Set the links HTML to the current opposite corner 
      .qtip({ 
       content: 
       { 
        text: 'this is the tooltip, better to use the alt attribute of the image or use html div content somewhere on the page', 
         title: { 
         text: 'This toolip title', 
         button: true 
         } 
       }, 
       position: { 
        corner: { 
         tooltip: 'bottomLeft', // Use the corner... 
         target: 'topRight' // ...and opposite corner 
        } 
       }, 
       show: { 
        solo: true, 
        when: false, // Don't specify a show event 
        ready: true // Show the tooltip when ready 
       }, 
       hide: false, // Don't specify a hide event 
       style: { 
        border: { 
         width: 5, 
         radius: 10 
        }, 
        padding: 10, 
        textAlign: 'left', 
        tip: true, // Give it a speech bubble tip with automatic corner detection 
        name: 'blue' // Style it according to the preset 'cream' style 
        // name: 'light' // Style it according to the preset 'cream' style 
       } 
      }); 


     }); 

然而,我沒有關閉按鈕。是否應該在我的圖像文件夾中有一個圖像或創建的樣式來執行此操作? All I see in the documentation here是指示按鈕:true。我試過按鈕:'關閉',並創建一個'關閉'超鏈接,因爲它應該 - 只是無法得到密切的圖像變化工作。關於我可能在這裏錯過的任何想法?

回答

1

我不知道如果這是你在找什麼,但是從我所看到的演示頁上的關閉按鈕不是一個圖像,而是通過CSS的樣式是這樣的:

.ui-tooltip-icon .ui-icon { 
    background: none no-repeat scroll -100em -100em transparent; 
    color: inherit; 
    font: bold 10px/13px Tahoma,sans-serif; 
    height: 14px; 
    text-align: center; 
    text-indent: 0; 
    width: 18px; 
    border-radius: 3px 3px 3px 3px; 
} 

和html是:

<span class="ui-icon ui-icon-close">×</span> 

我希望這是有幫助的!

+0

這不是一個答案。關閉按鈕需要通過選項添加,而不是硬連接到內容。這不會做任何事情(在qTip代碼中根本沒有引用ui-icon-close)。 –

2

這是我的解決方案,我想一個java行動,關閉qtip當我點擊一個按鈕

<input type="button" name="calendar_main_delete" class="calendar_main_delete" id="calendar_main_delete" value="Delete Event" /> 
       <input type="button" onClick="parent.location='#edit'" value="Edit Event" /> 



     <script type="text/javascript"> 

//click button call from button above 
$('.calendar_main_delete').click(function() { 

//.qtip is my qtip element from the parent page and then I hide it. 
$('.qtip', window.parent.document).qtip("hide"); 
}); 
</script> 
+3

JavaSCRIPT操作。 –

0

qTip 2有一個關閉按鈕選項。添加靠近內容的選項按鈕,並添加一個關閉按鈕。定位可以用css來完成。下面的代碼片段會讓你開始。

$item.qtip({ 
    overwrite: true, 
    content: { 
     text: content, 
     button: 'Close' 
    } 
}); 

如果你需要更多相關信息,請參閱本: http://qtip2.com/options。在頁面上查找「content.button」。