Simple Flexible jQuery Tooltip Plugin For jQuery Cooltip js - Download Simple Flexible jQuery Tooltip Plugin For jQuery - Cooltip.js

Download Simple Flexible jQuery Tooltip Plugin For jQuery – Cooltip.js

By Posted on

This time I will share jQuery Plugin and tutorial about Simple Flexible jQuery Tooltip Plugin For jQuery – Cooltip.js, hope it will help you in programming stack.

Simple Flexible jQuery Tooltip Plugin For jQuery Cooltip js - Download Simple Flexible jQuery Tooltip Plugin For jQuery - Cooltip.js
File Size: 17.1 KB
Views Total: 804
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Cooltip.js is a simple, flexible jQuery plugin to enhance the default browser tooltips that allow you to display any content inside your tooltips.

Features:

  • Custom trigger events: hover or click.
  • Accepted directions are top, right, bottom, and left.
  • Fully styleable via CSS.

How to use it:

1. Load the jQuery cooltip.js after you have jQuery javascript library loaded.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="js/cooltip.js"></script>

2. By default, the tooltip content is extracted from your element’s title attribute if not set in config.

view source
1 <a href="#" id="demo" title="Here is a tooltip!">Hover me</a>

3. The core CSS styles for the tooltip. You can modify or override the CSS rules displayed below to create your own tooltip styles.

view source
01 .cooltip {
02   position: absolute;
03   background-color: rgba(20, 20, 20, 0.85);
04   color: #fff;
05   padding: 0.5rem 0.7rem;
06   display: none;
07   font-size: 0.85rem;
08 }
09  
10 .cooltip.direction-top { margin-top: -0.7rem; }
11  
12 .cooltip.direction-top:after {
13   position: absolute;
14   content: "";
15   width: 0;
16   height: 0;
17   border-top: 0.4rem solid rgba(20, 20, 20, 0.85);
18   border-right: 0.4rem solid transparent;
19   border-bottom: 0.4rem solid transparent;
20   border-left: 0.4rem solid transparent;
21   top: 100%;
22  left: calc(50% - .4rem);
23 }
24  
25 .cooltip.direction-right { margin-left: 0.7rem; }
26  
27 .cooltip.direction-right:after {
28   position: absolute;
29   content: "";
30   width: 0;
31   height: 0;
32   border-top: 0.4rem solid transparent;
33   border-right: 0.4rem solid rgba(20, 20, 20, 0.85);
34   border-bottom: 0.4rem solid transparent;
35   border-left: 0.4rem solid transparent;
36  top: calc(50% - .4rem);
37   right: 100%;
38 }
39  
40 .cooltip.direction-bottom { margin-top: 0.7rem; }
41  
42 .cooltip.direction-bottom:after {
43   position: absolute;
44   content: "";
45   width: 0;
46   height: 0;
47   border-top: 0.4rem solid transparent;
48   border-right: 0.4rem solid transparent;
49   border-bottom: 0.4rem solid rgba(20, 20, 20, 0.85);
50   border-left: 0.4rem solid transparent;
51   bottom: 100%;
52  left: calc(50% - .4rem);
53 }
54  
55 .cooltip.direction-left { margin-left: -0.7rem; }
56  
57 .cooltip.direction-left:after {
58   position: absolute;
59   content: "";
60   width: 0;
61   height: 0;
62   border-top: 0.4rem solid transparent;
63   border-right: 0.4rem solid transparent;
64   border-bottom: 0.4rem solid transparent;
65   border-left: 0.4rem solid rgba(20, 20, 20, 0.85);
66  top: calc(50% - .4rem);
67   left: 100%;
68 }
69  
70 .cooltip.direction-top.align-right:after, .cooltip.direction-bottom.align-right:after { left: 0.3rem; }
71  
72 .cooltip.direction-top.align-left:after, .cooltip.direction-bottom.align-left:after {
73   left: initial;
74   right: 0.3rem;
75 }
76  
77 .cooltip.direction-right.align-top:after, .cooltip.direction-left.align-top:after {
78   top: initial;
79   bottom: 0.3rem;
80 }
81  
source : jqueryscript.net

Related posts: