什麼是用於谷歌泡沫提示和類似的「學習曲線」/「入門」泡沫提示？

Question

今天我進入了我的Google日曆，並且有一個小方塊（泡泡提示）解釋他們已經爲日曆事件實施了一個新的調色板。盒子右上角有一個小關閉按鈕。這些天在網絡上很普通的東西。

我想在我的（Ruby on Rails）網站上做類似的事情，以幫助新用戶瞭解網站周圍的功能，而不必讓用戶熟悉該功能後泡泡提示仍然存在於頁面上。

有誰知道這樣的「入門」泡沫技巧是如何製作的？這只是一個存儲在用戶計算機上的簡單cookie，關於他是否看過（關閉）該提示？

是任何人都知道一個Rails插件/寶石，使得它容易使這些技巧？

感謝:-)

Answer 1

這不是東西，是特定的平臺，但通常完成的前端。服務器代碼只有在向起始事件頁面寫入條件時才需要考慮。

就前端而言，JS Guiders是一款非常出色的javascript/jQuery插件，您可以使用它來創建一個類似於您的網頁上的功能的「導覽」。我已經在幾個成功的web應用中使用過它們。 （我不是下屬，只是一個風扇）

要開始導覽，你既可以存儲在一個數據庫的條件，然後將其插入JavaScript或設置cookie並在javascript閱讀。

我會建議存儲在DB中的狀態，雖然，因爲這將是很煩人的有尖/旅遊顯示我使用和應用上不斷更新的計算機上。

包括jQuery和引領者腳本之後，就可以使用這樣的代碼來創建旅遊：

$(document).ready(function() { 

     guiders.createGuider({ 
      buttons: [{ name: "Next"}], 
      description: "This is the first guider", 
      id: "first", 
      next: "second", // when the button is pressed, jump to this guider 
      overlay: true, 
      title: "Guten Tag!" 
     }); 

     guiders.createGuider({ 
      attachTo: "#logo", // dom element to attach to 
      buttons: [{ name: "Close"}], 
      description: "This is the second...", 
      id: "second", 
      overlay: true, // grey out the background to 1/2 opacity 
      position: 3, // Clock position (3 o'clock 
      title: "Find your way home" 
     }); 

    }); 

    if(condition){ 
     guiders.show('first'); // jump into the tour at guider id first 
    } 

Answer 2

的功能性，他們關閉它們消失後，你可以railscast提取此公告的概念 - 只不要讓他們sidewide和他們的風格不同wuth CSS：http://railscasts.com/episodes/103-site-wide-announcements