Bootstrap Snippet Simple CSS Tooltips using HTML CSS

1
2
3
4
5
6
7
8
9
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="demo">
<a href="#" data-tooltip="I’m the tooltip text.">I’m a link with a tooltip.</a>
<button class="tooltip-right" data-tooltip="Добавить ещё.">+</button>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * Demo styles
 * Not needed for tooltips to work
 */
/* `border-box`... ALL THE THINGS! */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* TOOLTIP */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple CSS Tooltips"
Bootstrap 4.1.1 Snippet by blackgirl

Related: See More

Questions / Comments:

"Simple CSS Tooltips" Bootstrap 4.1.1 Snippet by blackgirl

Related: See More

Questions / Comments:

"Simple CSS Tooltips"
Bootstrap 4.1.1 Snippet by blackgirl