jquery实现图片tooltip效果

964b9a1f-86ae-483e-9ed1-7fb21f90614f

鼠标移到缩略图上显示tooltip

 

1,html

1
2
3
4
5
6
7
8
9
<div>
<div class="image-thumbnail"
option-type="2"
option-label="<?= $name ?>"
option-tooltip-thumb="<?= $smallImage ?>"
option-tooltip-value="">
![](<?php echo $smallImage?)" width="100" height="100" alt="<?php echo $name?>">
</div>
</div>

 

2,js

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
define([
'jquery'
], function ($) {
'use strict';
/**
* Render tooltips by attributes (only to up).
* Required element attributes:
* - option-type (integer, 0-3)
* - option-label (string)
* - option-tooltip-thumb
* - option-tooltip-value
*/
$.widget('mage.SwatchRendererTooltip', {
options: {
delay: 200, //how much ms before tooltip to show
tooltipClass: 'swatch-option-tooltip' //configurable, but remember about css
},

/**
* @private
*/
_init: function () {
var $widget = this,
$this = this.element,
$element = $('.' + $widget.options.tooltipClass),
timer,
type = parseInt($this.attr('option-type'), 10),
label = $this.attr('option-label'),
thumb = $this.attr('option-tooltip-thumb'),
value = $this.attr('option-tooltip-value'),
$image,
$title,
$corner;

if (!$element.size()) {
$element = $('<div class="' +
$widget.options.tooltipClass +
'"><div class="image"></div><div class="title"></div><div class="corner"></div></div>'
);
$('body').append($element);
}

$image = $element.find('.image');
$title = $element.find('.title');
$corner = $element.find('.corner');

$this.hover(function () {
if (!$this.hasClass('disabled')) {
timer = setTimeout(
function () {
var leftOpt = null,
leftCorner = 0,
left,
$window;

if (type === 2) {
// Image
$image.css({
'background': 'url("' + thumb + '") no-repeat center', //Background case
'background-size': 'initial'
});
$image.show();
} else if (type === 1) {
// Color
$image.css({
background: value
});
$image.show();
} else if (type === 0 || type === 3) {
// Default
$image.hide();
}

$title.text(label);

leftOpt = $this.offset().left;
left = leftOpt + $this.width() / 2 - $element.width() / 2;
$window = $(window);

// the numbers (5 and 5) is magick constants for offset from left or right page
if (left < 0) {
left = 5;
} else if (left + $element.width() > $window.width()) {
left = $window.width() - $element.width() - 5;
}

// the numbers (6, 3 and 18) is magick constants for offset tooltip
leftCorner = 0;

if ($element.width() < $this.width()) {
leftCorner = $element.width() / 2 - 3;
} else {
leftCorner = (leftOpt > left ? leftOpt - left : left - leftOpt) + $this.width() / 2 - 6;
}

$corner.css({
left: leftCorner
});
$element.css({
left: left,
top: $this.offset().top - $element.height() - $corner.height() - 18
}).show();
},
$widget.options.delay
);
}
}, function () {
$element.hide();
clearTimeout(timer);
});

$(document).on('tap', function () {
$element.hide();
clearTimeout(timer);
});

$this.on('tap', function (event) {
event.stopPropagation();
});
}
});
});

 

3,调用

1
2
3
4
5
6
<script> 
require(['jquery',"SwatchRendererTooltip"], function ($) {
'use strict';
$('.image-thumbnail').SwatchRendererTooltip();
})
</script>

 

4,css

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.swatch-option-tooltip {
max-width: 140px;
/*max-height: 160px;*/
max-height: 100%;
min-height: 20px;
min-width: 20px;
position: absolute;
padding: 5px;
background: #fff;
color: rgb(148, 148, 148);
border: 1px solid #adadad;
display: none;
z-index: 999;
text-align: center;
}

.swatch-option-tooltip .corner,
.swatch-option-tooltip-layered .corner {
left: 40%;
position: absolute;
bottom: 0;
height: 8px;
}

.swatch-option-tooltip .corner:after,
.swatch-option-tooltip-layered .corner:after {
content: '';
position: relative;
top: 1px;
left: -15px;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 7.5px 0 7.5px;
border-color: #fff transparent transparent transparent;
font-size: 1px;
}

.swatch-option-tooltip .corner:before,
.swatch-option-tooltip-layered .corner:before {
content: '';
position: relative;
top: 2px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8.5px 0 8.5px;
border-color: #adadad transparent transparent transparent;
font-size: 1px;
}

.swatch-option-tooltip .image,
.swatch-option-tooltip-layered .image {
display: block;
height: 130px;
width: 130px;
/*margin: 0 0 5px;*/
margin: 0 auto;
}

.swatch-option-tooltip .title {
max-width: 140px;
min-height: 20px;
max-height: 200px;
color: rgb(40, 40, 40);
text-align: center;
display: block;
overflow: hidden;
}

 

坚持原创技术分享,您的支持将鼓励我继续创作!