test5/test.html at master · danieloraca/test5 · GitHub

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
xx<style type="text/css">
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:30px; margin-left:-100px; width:200px; line-height:16px; }
a.tooltip:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#EEE; background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0; }
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span { border-radius:2px; box-shadow: 0px 0px 8px 4px #666; /*opacity: 0.8;*/ }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var width = $(this).width();
	console.log('width: ' + width);
	$.each($('.tooltip'), function($key, value){
		var location = $(this).offset();
		var top = location.top;
	    var left = location.left;

	    left = left - $('span').width();
	    console.log('initial: ' + left);
	    if (left < -100) {
	    	left = left + 100;
	    	$(this).find("span").css({
		        'margin-left': left + 'px'
		    });
	    } else {
	    	var x = left + $('span').width();
	    	var y = width - $('span').width();
	    	console.log('hmm.. ' + x);
		   	if ( x > y) {
		    	left = left - 340;
		    	$(this).find("span").css({
			        'margin-left': left + 'px'
			    });
		    }
		}

	    console.log('aftrr: ' + left);
	});


});
</script>

<a href="#" class="tooltip">
	whatever text
	<span>
		<strong>CSS only Tooltip</strong>
		<br /> Pure CSS popup tooltips with clean semantic XHTML.
	</span>
</a>

fnewfpef p pefewof poweopf j
<a href="#" class="tooltip">
	whatever text
	<span>
		<strong>CSS only Tooltip</strong>
		<br /> Pure CSS popup tooltips with clean semantic XHTML.
	</span>
</a>