add tooltip for project

Gemfile

@@ -34,6 +34,7 @@ gem 'globalize-accessors'
 gem 'ckeditor', '~> 4.3'
 gem 'mini_magick'
 gem 'video_info', '~> 2.7'
+gem 'tooltipster-rails'
 
 group :development, :test do
   gem 'byebug', platform: :mri

Gemfile.lock

@@ -290,6 +290,7 @@ GEM
     thor (0.20.3)
     thread_safe (0.3.6)
     tilt (2.0.9)
+    tooltipster-rails (4.2.6)
     turbolinks (5.2.0)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
@@ -347,6 +348,7 @@ DEPENDENCIES
   simple_form
   spring
   spring-watcher-listen (~> 2.0.0)
+  tooltipster-rails
   turbolinks (~> 5)
   tzinfo-data
   uglifier (>= 1.3.0)

app/assets/javascripts/application.js

@@ -12,6 +12,11 @@
 //
 //= require jquery
 //= require jquery-ui
+//= require jBox.all
+//= require demo
+//= require playground-avatars
+//= require playground-inception
+//= require playground-login
 //= require jquery.remotipart
 //= require bootstrap.min
 //= require outdatedbrowser

app/assets/javascripts/main.js

@@ -22,7 +22,7 @@ jQuery(document).ready(function($){
   // initTip();
   // initMap();
   topTip();
-  initTooltipster();
+  // initTooltipster();
   playStopVideoInModal();
   // initTwentytwenty();
   scrollToTop();
@@ -46,7 +46,6 @@ function scrollToTop() {
   });
 }
 
-
 function initTwentytwenty() {
   $(window).on("load", function(){
     $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
@@ -187,7 +186,7 @@ function mobilePartners() {
 $(window).resize(function() {
   mobilePartners();
   // initTooltipster();
-  initDraggable();
+  //initDraggable();
 });
 
 /**

app/controllers/home_controller.rb

 class HomeController < ApplicationController
   def index
-  	@video = VideoInfo.new("http://www.youtube.com/watch?v=mZqGqE0D0n4")
   	@projects = Project.all
   end
 end
\ No newline at end of file

app/views/home/index.html.haml

@@ -63,12 +63,22 @@
                 .title_highlighted
                   Рейтинг топ-100 найпрогресивніших компаній міста
               .grid.clearfix
-                - @projects.each do |project|
                 .grid_item.first
                   = link_to image_tag('grid_item_first.png'), "#", class: 'grid_item_content'
-                    / %a.grid_item_content{:href => "#", :style => "background-image: url(grid_item_first.png)"}
+                - @projects.each do |project|
                   .grid_item
-                    = link_to image_tag(project.photo.url(:thumb)), project_path(project), class: 'grid_item_content tooltipstered'
+                    #Tooltip-2
+                      = link_to image_tag(project.photo.url(:thumb)), project_path(project), class: "grid_item_content tooltipstered"
+                  .tooltip_templates
+                    #toolTip
+                      .tooltipster_top
+                        .tooltipster_title
+                          #{project.status}
+                          .tooltipster_title_name #{project.title}
+                        %a.tooltipster_img{"data-target" => "#video", "data-toggle" => "modal", :href => "//www.youtube.com/embed/uX12dn47Dy0?rel=0&autoplay=1&showinfo=0html5=1"}
+                          = image_tag("#{VideoInfo.new("www.youtube.com/embed/uX12dn47Dy0?rel=0&autoplay=1&showinfo=0html5=1").thumbnail_small}")
+                      .tooltipster_bot
+                        %a.tooltipster_link{:href => "#"} #{project.site}
                 .grid_item.last
                   %span.grid_item_content.tooltipstered
                     %a.get_involved_link.centered{"data-original-title" => "приєднатись", "data-placement" => "top", "data-toggle" => "tooltip", :href => "#"}
@@ -77,6 +87,13 @@
               .progress
                 .progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "58", :role => "progressbar", :style => "width: 58%"}
                   .progress_value_lg 58 / 100
+              #video.modal.fade.modal_styled.modal_video.modal_centered{"aria-labelledby" => "modalLabel", :role => "dialog", :tabindex => "-1"}
+                .modal-dialog{:role => "document"}
+                  .modal-content
+                    %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
+                      %i.icon.icon_close2
+                    .embed-responsive.embed-responsive-16by9
+                      %iframe{:allowfullscreen => "", :frameborder => "0", :height => "315", :src => "", :width => "560"}
       .main_head_bot
         .head_soc
           %a.round_link.soc_link_yt{:href => "#"}
@@ -475,32 +492,8 @@
           .map_text
             = t ('map_text')
     #map.map
-  .tooltip_templates
-    #tooltip_content_inner
-      .tooltipster_top
-        .tooltipster_title
-          Технічний партнер
-          .tooltipster_title_name Cosmo-Trecel
-        %a.tooltipster_img{"data-target" => "#video", "data-toggle" => "modal", :href => "//www.youtube.com/embed/uX12dn47Dy0?rel=0&autoplay=1&showinfo=0html5=1"}
-          %img{:alt => "", :src => "img/tip_img1.png"}/
-      .tooltipster_bot
-        %a.tooltipster_link{:href => "#"} cosmo-travel.com.ua
-        %a.round_link{:href => "#"}
-          %i.icon.icon_fb
       %a.btn.btn_default.btn_round.btn_bordered{"data-original-title" => "долучитись", "data-placement" => "top", "data-toggle" => "tooltip", :href => "#"}
         %i.icon.icon_plus
-    .tooltip_templates
-      #tooltip_content_inner
-        .tooltipster_top
-          .tooltipster_title
-            Технічний партнер
-            .tooltipster_title_name Cosmo-Trecel
-          %a.tooltipster_img{"data-target" => "#video", "data-toggle" => "modal", :href => "//www.youtube.com/embed/uX12dn47Dy0?rel=0&autoplay=1&showinfo=0html5=1"}
-            = image_tag('tip_img1.png')
-        .tooltipster_bot
-          %a.tooltipster_link{:href => "#"} cosmo-travel.com.ua
-          %a.round_link{:href => "#"}
-            %i.icon.icon_fb
 %a#scroller.scroller{:href => "#"}
   %i.icon.icon_arrow_up
   %div на початок

vendor/assets/stylesheets/main.css

@@ -12201,6 +12201,7 @@ h1 {
     padding-right: 100px;
     padding: 15px 117px 17px 30px;
     position: relative;
+    background: #EE6563;
 }
 .tooltipster_img {
     position: absolute;