Protip

Documents

Title: Protip

Description: Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Category: Modal / Tooltip

Library: Protip
Animate.css
jQuery

Include Files

<!-- Add jQuery and Protip -->
<link rel="stylesheet" href="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.js"></script>
<!-- [4] Animations -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">

Basic markup


        <script>
            $(function () {
                $.protip();
            });
        </script>
        // The default selector is .protip.
        <a class="protip" data-pt-title="Tooltip Title" data-pt-position="top">Tooltip Opne</a>

Attachment Table

Protip Options

Property	Type	Default	Description
selector	String	.protip	We will use this selector to identify elements with protip.
namespace	String	pt	data-[NAMESPACE]-*
protipTemplate	String	See code	Template of a protip. Variables ({}) will get replaced.
arrowTemplate	String	See code	Template of a protip arrow.
iconTemplate	String	See code	Template of a protip with icon.
observer	Boolean	true	If true, we will watch for changes in the DOM and check if a protip needs to be showed or removed.
delayResize	NUmber	100	Default time for onResize event timeout. After a resize, we need to reposition the tooltips, but don't want to run on every fired resize event.
defaults	String	{...}	Default (global) values for a tooltip. Override any available data-pt-* attributes.

Protip Available attributes [data-pt-*]

Attribute	Type	Default	Description
trigger	String	'hover'	How you want to trigger this tooltip? Available values: hover, click, click2, sticky (sticky will be shown on load; click2 won't listen to body clicks)
title	String	null	The tooltip content text. Alternatively you may provide a selector (ID or class) starting with # or . to get data (even whole HTML) from another DOM element's content. Example: This is my tooltips content . Also you may use :next, :prev or :this which allows you to get the content of the next, prev or this element immediatelly.
delay-in	Number	0	Delay of showing a tooltip. Handy in cases when you want to prevent tooltips on quick mouseovers.
delay-out	Number	0	Delay of hiding the tooltip. Handy in cases you have clickable content in the tooltip for example.
interactive	Boolean	false	If true, protip will use a default 250ms as delayOut for clickable contents.
gravity	Boolean, String	true	Gravity will check your tooltip before showing it and it will search for better positions if the tooltip won't fit to viewport. Gravity has multiple options available, there is a separate section in the documentation about gravity.
offset-top	Int	0	Adjust the Y position of the tooltip.
offset-left	Int	0	Adjust the X position of the tooltip.
position	String	'bottom'	Preferred position. Check Positions section for available options and details.
placement	String	'outside'	Placement of the tooltip inside the element. Available values are: outside, inside, border and center.
classes	String	null	These classes will be added to the tooltip which may enable additional styling for example.
arrow	Boolean	true	Hide arrow from this tooltip. At initialization there is an option to set the size of the arrow. Protip will calculate this into positions.
width	Int, String	300	This is the default max-width for the tooltip. If you need fixed width, write as this: 300!
icon	Boolean, String	false	Adds icon template to the tooltip markup with the specified icon class.
observer	Boolean	false	If true, we will attach an observer to the source element and watch for changes. For example if you change the data-pt-title attribute, the tooltip title will be changed also.
target	Boolean, String	'body'	We will append the tooltip to this selector. Use true if you want to append into the source element.
skin	Boolean, String	'default'	Skin to apply only to this tooltip.
size	String	'normal'	tiny, small, normal, big, large (Provided only by the Default skin.)
scheme	String	'pro'	Default color scheme to use (provided by the Default skin only)
animate	Boolean, String	undefined	Animation type based on Animate.css. See: Animations
auto-hide	Boolean, Number	false	Tooltip will hide itself automatically after this timeout (milliseconds).
auto-show	Boolean	false	Automatically show tooltip for this element on load (stickies will be shown anyway).
mixin	String	undefined	Tooltip mixins to use. Separated by spaces.

Animate.css Class Name

Attention Seekers
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello
Bouncing Entrances
bounceIn	bounceInDown	bounceInLeft	bounceInRight
bounceInUp
Bouncing Exits
bounceOut	bounceOutDown	bounceOutLeft	bounceOutRight
bounceOutUp
Fading Entrances
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig
Fading Exits
fadeOut	fadeOutDown	fadeOutDownBig	fadeOutLeft
fadeOutLeftBig	fadeOutRight	fadeOutRightBig	fadeOutUp
fadeOutUpBig
Flippers
flipInX	flipInY	flipOutX	flipOutY
Lightspeed
lightSpeedIn	lightSpeedOut
Rotating Entrances
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight
Rotating Exits
rotateOut	rotateOutDownLeft	rotateOutDownRight	rotateOutUpLeft
rotateOutUpRight
Sliding Entrances
slideInUp	slideInDown	slideInLeft	slideInRight
Sliding Exits
slideOutUp	slideOutDown	slideOutLeft	slideOutRight
Zoom Entrances
zoomIn	zoomInDown	zoomInLeft	zoomInRight
zoomInUp
Zoom Exits
	zoomOut	zoomOutDown	zoomOutLeft
zoomOutRight	zoomOutUp
Specials
hinge	jackInTheBox	rollIn	rollOut

Related

Source Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Add jQuery and Protip -->
    <link rel="stylesheet" href="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.js"></script>
    <!-- [4] Animations -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
    <title>Protip</title>
    <style>
        .button{
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 30px 0;
            cursor: pointer;
            transition: all .5s;
            text-decoration: none;
            color: #fff;
            border-radius: 5px;
            background-color: hsl(174, 100%, 29%);
        }
        .button:hover{
            background-color: hsl(174, 100%, 35%);
        }
        .buttons{
            display: grid;
            max-width: 720px;
            margin: 0 auto 50px;
            grid-auto-columns: auto;
            grid-auto-flow: row;
            grid-column-gap: 5px;
            grid-row-gap: 5px;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr;
        }
        /* Get font family of fontawesome via CDN. */
        @font-face{
            font-family: 'icons';
            src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff');
        }
        [class^='icon-']:before, [class*=' icon-']:before{
            font-family: 'icons';
            font-weight: normal;
            font-style: normal;
            font-variant: normal;
            line-height: 1em;
            display: inline-block;
            width: 1em;
            margin-right: .2em;
            margin-left: .2em;
            text-align: center;
            text-decoration: inherit;
            text-transform: none;
            speak: none;
        }
        /* Unicode of https://fontawesome.com/v4.7.0/icon/info-circle/ */
        .icon-info-circled:before{
            content: '\f05a';
        }
        /* Unicode of https://fontawesome.com/v4.7.0/icon/question-circle/ */
        .icon-help-circled:before{
            content: '\f059';
        }
        /* Unicode of https://fontawesome.com/v4.7.0/icon/check-circle/ */
        .icon-ok-circled:before{
            content: '\f058';
        }
        /* Unicode of https://fontawesome.com/v4.7.0/icon/trash/ */
        .icon-trash-empty:before{
            content: '\f1f8';
        }
        /* Unicode of https://fontawesome.com/v4.7.0/icon/tree/ */
        .icon-tree:before{
            content: '\f1bb';
        }
    </style>
</head>
<body>
    <header>
        <h1 class="dlw-title">Protip</h1>
        <p class="dlw-description">Protip is a jQuery plugin that generates tooltips. 
            <br>Set the position, size, etc. of the tooltip only with data attribute.</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] Position</h2>
        <p>Defines the position of the tooltip with "data-pt-position".
            <br>If there is not enough space the position will change automatically.</p>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <div class="buttons">
            <a class="button protip" data-pt-title="TOP LEFT CORNER" data-pt-position="top-left-corner">top-left-corner</a>
            <a class="button protip" data-pt-title="TOP LEFT" data-pt-position="top-left">top-left</a>
            <a class="button protip" data-pt-title="TOP" data-pt-position="top">top</a>
            <a class="button protip" data-pt-title="TOP RIGHT" data-pt-position="top-right">top-right</a>
            <a class="button protip" data-pt-title="TOP RIGHT CORNER" data-pt-position="top-right-corner">top-right-corner</a>
            <a class="button protip" data-pt-title="LEFT TOP" data-pt-position="left-top">left-top</a>
            <span></span>
            <span></span>
            <span></span>
            <a class="button protip" data-pt-title="RIGHT TOP" data-pt-position="right-top">right-top</a>
            <a class="button protip" data-pt-title="LEFT" data-pt-position="left">left</a>
            <span></span>
            <span></span>
            <span></span>
            <a class="button protip" data-pt-title="RIGHT" data-pt-position="right">right (Default)</a>
            <a class="button protip" data-pt-title="LEFT BOTTOM" data-pt-position="left-bottom">left-bottom</a>
            <span></span>
            <span></span>
            <span></span>
            <a class="button protip" data-pt-title="RIGHT BOTTOM" data-pt-position="right-bottom">right-bottom</a>
            <a class="button protip" data-pt-title="BOTTOM LEFT CORNER" data-pt-position="bottom-left-corner">bottom-left-corner</a>
            <a class="button protip" data-pt-title="BOTTOM LEFT" data-pt-position="bottom-left">bottom-left</a>
            <a class="button protip" data-pt-title="BOTTOM" data-pt-position="bottom">bottom</a>
            <a class="button protip" data-pt-title="BOTTOM RIGHT" data-pt-position="bottom-right">bottom-right</a>
            <a class="button protip" data-pt-title="BOTTOM RIGHT CORNER" data-pt-position="bottom-right-corner">bottom-right-corner</a>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[2] Font Size & Tooltip Width</h2>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <h3 class="dlw-lead">Size</h3>
        <p>Defines the font-size of the tooltip with "data-pt-size".</p>
        <div class="buttons">
            <a class="button protip" data-pt-title="TINY" data-pt-size="tiny" data-pt-position="top">tiny</a>
            <a class="button protip" data-pt-title="SMALL" data-pt-size="small" data-pt-position="top">small</a>
            <a class="button protip" data-pt-title="NORMAL" data-pt-size="normal" data-pt-position="top">normal (Default)</a>
            <a class="button protip" data-pt-title="BIG" data-pt-size="big" data-pt-position="top">big</a>
            <a class="button protip" data-pt-title="LARGE" data-pt-size="large" data-pt-position="top">large</a>
        </div>
        <h3 class="dlw-lead">Width</h3>
        <p>Defines the width of the tooltip with "data-pt-width".</p>
        <div class="buttons">
            <a class="button protip" data-pt-title="Specify 100px for data-pt-width as max-width." data-pt-width="100" data-pt-position="top">100px</a>
            <a class="button protip" data-pt-title="Specify 200px for data-pt-width as max-width." data-pt-width="200" data-pt-position="top">200px</a>
            <a class="button protip" data-pt-title="Specify 300px for data-pt-width as max-width." data-pt-width="300" data-pt-position="top">300px (Default)</a>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[3] Placement</h2>
        <p>Defines the placement of the tooltip with "data-pt-placement".</p>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <div class="buttons">
            <a class="button protip" data-pt-title="OUTSIDE" data-pt-placement="outside" data-pt-position="top">outside (Default)</a>
            <a class="button protip" data-pt-title="INSIDE" data-pt-placement="inside" data-pt-position="top">inside</a>
            <a class="button protip" data-pt-title="BORDER" data-pt-placement="border" data-pt-position="top">border</a>
            <a class="button protip" data-pt-title="CENTER" data-pt-placement="center" data-pt-position="top">center</a>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[4] Animations</h2>
        <p>Defines the animation of the tooltip with "data-pt-animate" based on
            <a href="https://designlink.work/animatecss/" target="_blank">animate.css</a>.</p>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <div class="buttons">
            <a class="button protip" data-pt-title="BOUNCE" data-pt-animate="bounce" data-pt-position="top">bounce</a>
            <a class="button protip" data-pt-title="FLASH" data-pt-animate="flash" data-pt-position="top">flash</a>
            <a class="button protip" data-pt-title="PULSE" data-pt-animate="pulse" data-pt-position="top">pulse</a>
            <a class="button protip" data-pt-title="RUBBERBAND" data-pt-animate="rubberBand" data-pt-position="top">rubberBand</a>
            <a class="button protip" data-pt-title="SHAKE" data-pt-animate="shake" data-pt-position="top">shake</a>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[5] Icon</h2>
        <p>Defines the icon of the tooltip with "data-pt-icon".
            <br>A <tag>&lt;i class="icon-{data-pt-icon}"&gt;&lt;/i&gt;</tag> is attached at the beginning of the tooltip. In this example, fontawesome's font is read directly and set to be displayed as an icon (see Style).</p>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <div class="buttons">
            <a class="button protip" data-pt-title="INFO-CIRCLED" data-pt-icon="info-circled" data-pt-position="top">info-circled</a>
            <a class="button protip" data-pt-title="HELP-CIRCLED" data-pt-icon="help-circled" data-pt-position="top">help-circled</a>
            <a class="button protip" data-pt-title="OK-CIRCLED" data-pt-icon="ok-circled" data-pt-position="top">ok-circled</a>
            <a class="button protip" data-pt-title="TRASH-EMPTY" data-pt-icon="trash-empty" data-pt-position="top">trash-empty</a>
            <a class="button protip" data-pt-title="TREE" data-pt-icon="tree" data-pt-position="top">tree</a>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[6] Scheme</h2>
        <p>Defines the color scheme of the tooltip with "data-pt-scheme".</p>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <div class="buttons">
            <a class="button protip" data-pt-title="PRO" data-pt-scheme="pro" data-pt-position="top">pro (Default)</a>
            <a class="button protip" data-pt-title="BLUE" data-pt-scheme="blue" data-pt-position="top">blue</a>
            <a class="button protip" data-pt-title="RED" data-pt-scheme="red" data-pt-position="top">red</a>
            <a class="button protip" data-pt-title="AQUA" data-pt-scheme="aqua" data-pt-position="top">aqua</a>
            <a class="button protip" data-pt-title="BLACK" data-pt-scheme="black" data-pt-position="top">black</a>
            <a class="button protip" data-pt-title="LEAF" data-pt-scheme="leaf" data-pt-position="top">leaf</a>
            <a class="button protip" data-pt-title="PURPLE" data-pt-scheme="purple" data-pt-position="top">purple</a>
            <a class="button protip" data-pt-title="PINK" data-pt-scheme="pink" data-pt-position="top">pink</a>
            <a class="button protip" data-pt-title="ORANGE" data-pt-scheme="orange" data-pt-position="top">orange</a>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[7] Shape</h2>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <h3 class="dlw-lead">Arrow</h3>
        <p>Defines the arrow of the tooltip with "data-pt-arrow".</p>
        <div class="buttons">
            <a class="button protip" data-pt-title="TRUE" data-pt-arrow="true" data-pt-position="top">True (Default)</a>
            <a class="button protip" data-pt-title="FALSE" data-pt-arrow="false" data-pt-position="top">False</a>
        </div>
        <h3 class="dlw-lead">Skin</h3>
        <p>Defines the skin of the tooltip with "data-pt-skin".</p>
        <div class="buttons">
            <a class="button protip" data-pt-title="DEFAULT" data-pt-skin="default" data-pt-position="top">Default</a>
            <a class="button protip" data-pt-title="SQUARE" data-pt-skin="square" data-pt-position="top">Square</a>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[8] Auto Show / Hide</h2>
        <script>
            $(function () {
                $.protip();
            });
        </script>
        <h3 class="dlw-lead">Auto Show</h3>
        <p>Defines the auto show (on/off) of the tooltip with "data-pt-auto-show".</p>
        <div class="buttons">
            <a class="button protip" data-pt-title="TRUE" data-pt-auto-show="true" data-pt-position="top">True</a>
            <a class="button protip" data-pt-title="FALSE" data-pt-auto-show="false" data-pt-position="top">False (Default)</a>
        </div>
        <h3 class="dlw-lead">Auto Hide</h3>
        <p>Defines the auto hide (off/timeout ms) of the tooltip with "data-pt-auto-hide".</p>
        <div class="buttons">
            <a class="button protip" data-pt-title="FALSE" data-pt-auto-hide="false" data-pt-position="top">false (Default)</a>
            <a class="button protip" data-pt-title="1000ms" data-pt-auto-hide="1000" data-pt-position="top">1000ms</a>
            <a class="button protip" data-pt-title="3000ms" data-pt-auto-hide="3000" data-pt-position="top">3000ms</a>
        </div>
    </section>
</body>
</html>

Comment

Search

Style Design: Text Style DesignCSS
Here, design samples of various effects to text are posted.; Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.; OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.; HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.; Box Shadow Style DesignCSS
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.

Layout: How to specify a breakpoint and switch imagesJS
Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.; Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.; FlexCSS
Flex is the value of the CSS display property.

Link & Button: Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Button.cssCSS
Button.css is collection of CSS3 button animations.

Card: Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.

Text: Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.; Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media: FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.; YouTube Embed
Introduction of various embedment methods of YouTube.; FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.; xZoomjQuery
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.; Instagram.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.

Date: Moment.jsJS
Moment.js is a javascript that processes and displays date and time.; Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table: MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.; Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan.; Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Form: jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.; Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.; jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.; FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.; slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.; slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox: fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.; fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.; Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.; Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.; Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.; GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.; jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.; metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.; fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.; Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.; Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.; Filterizr #2. Advanced FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.

Animation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; ScrollajQuery
Scrolla is jQuery scroll animation plugin.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.; jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background: fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip: Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.; ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social

Framework: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.; Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Cheat Sheet: HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub; CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine; Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.; GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other: Google Search
On this page you can search for codes collectively.; Design News
It is a news feed about design.