JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div class="container" ng-app="testApp" ng-controller="Main">
    <div class="subcontainer">
        <div class="kinda_book" ng-repeat="book in books">
            <div class="tooltip">test</div>
        </div>
    </div>
</div>

SCSS

body{
    $scroll_dist:400;
    $books_in_line:5;
    $book_width:70;
    $book_margin:10;
    $scroll_bar_fix:30;
    overflow-x:hidden;
    background:url(http://www.urbansamurai.com/wp-content/uploads/2013/12/sunset1.jpg);
    div.container {
        position: relative;
        margin: 0 auto;
        padding: 0px;
        width: #{($book_width+$book_margin*2)*$books_in_line}px;
        height:300px;
        background: blue;
        overflow-y:visible;
        overflow-x: visible;
        div.subcontainer {
            position:absolute;
            height:100%;
            overflow-y:scroll;
            margin: 0px #{-$scroll_dist}px;
            padding: 0px #{$scroll_dist - $scroll_bar_fix}px 0px #{$scroll_dist}px;
            div.kinda_book {
                position: relative;
                        margin: #{$book_margin}px;
                float: left;
                height: 100px;
                        width: #{$book_width}px;
                background: grey;
                div.tooltip {
                    position: relative;
                    z-index:100;
                    height:30px;
                    width: 300px;
                    background: black;
                    opacity:0.7;
                    display: none;
                }
            }
            div.kinda_book:hover {
                div.tooltip {
                    display:block;
                }
            }
        }
    }
}

JavaScript

'use strict'

angular.module('testApp', []);

function Main($scope) {
    $scope.books = new Array(25);
    console.log($scope.books);
}