tooltipster
Version:
A flexible and extensible jQuery plugin for modern tooltips.
328 lines (295 loc) • 15.9 kB
HTML
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="../dist/css/tooltipster.bundle.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script type="text/javascript" src="./svg.min.js"></script>
<script type="text/javascript" src="./svg.screenbox.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="../dist/js/tooltipster.bundle.js"></script>
<script type="text/javascript" src="../dist/js/plugins/tooltipster/SVG/tooltipster-SVG.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip.hover').tooltipster({
trigger: 'hover'
});
$('.tooltip.click').tooltipster({
trigger: 'click',
trackOrigin: true,
trackTooltip: true
});
$('#custom_mouse_hover').tooltipster({
trigger: 'custom',
triggerOpen: {
mouseenter: true
},
triggerClose: {
mouseleave: true
}
});
$('#custom_mouse_click').tooltipster({
trigger: 'custom',
triggerOpen: {
click: true
},
triggerClose: {
click: true
}
});
$('#custom_touch_hover').tooltipster({
delayTouch: 0,
trigger: 'custom',
triggerOpen: {
touchstart: true
},
triggerClose: {
touchleave: true
}
});
$('#custom_touch_hoverinteractive').tooltipster({
interactive: true,
trigger: 'custom',
triggerOpen: {
touchstart: true
},
triggerClose: {
touchleave: true
}
});
$('#custom_touch_tap').tooltipster({
trigger: 'custom',
triggerOpen: {
tap: true
},
triggerClose: {
tap: true
}
});
$('#custom_touch_tapinteractive').tooltipster({
interactive: true,
trigger: 'custom',
triggerOpen: {
tap: true
},
triggerClose: {
tap: true
}
});
$('#custom_touch_clicktapscroll').tooltipster({
trigger: 'custom',
triggerOpen: {
click: true,
tap: true
},
triggerClose: {
scroll: true
}
});
$('.inline').tooltipster({
content: 'Second',
multiple: true,
position: 'right'
});
$('.inline').tooltipster({
content: 'Third',
multiple: true,
position: 'bottom'
});
$('.inline').tooltipster({
content: 'Fourth',
multiple: true,
position: 'left'
});
});
$(function(){
var gender1 = new Raphael(document.getElementById('genderChart1'), 300, 300);
gender1.customAttributes.arc = function (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return {
path: path
};
};
// base light grey circle
var baseCircle1 = gender1.circle(150, 150, 150);
baseCircle1.attr({
stroke: 'none',
fill: '#66cca6'
});
// arcs
var maleArc1 = gender1.path().attr({
stroke: "#3ea9f5",
"stroke-width": 40,
arc: [0, 0, 0, 360, 100],
transform: "t150,150" // translate to center of canvas, then rotate by degrees
}).attr('id', 'blue');
//maleArc1.node.setAttribute("class","tooltip");
var genderlessArc1 = gender1.path().attr({
"stroke": "#fff",
"stroke-width": 40,
arc: [0, 0, 0, 360, 100],
transform: "t150,150r240" // rotate to 200 degrees, where last arc ended
});
var customArc1 = gender1.path().attr({
"stroke": "#662c91",
"stroke-width": 40,
arc: [0, 0, 0, 360, 100],
transform: "t150,150r248"
});
var femaleArc1 = gender1.path().attr({
"stroke": "#ff7aac",
"stroke-width": 40,
arc: [0, 0, 0, 360, 100],
transform: "t150,150r266"
});
maleArc1.animate({
arc: [0, 0, 240, 360, 100]
}, 1000, "easeIn", function () { // callback so next arc animates
genderlessArc1.animate({
arc: [0, 0, 8, 360, 100]
}, 200, "easeIn", function () {
customArc1.animate({
arc: [0, 0, 18, 360, 100]
}, 200, "easeIn", function () {
femaleArc1.animate({
arc: [0, 0, 94, 360, 100]
}, 500, "backOut");
});
});
});
// top dark grey circle
var topCircle1 = gender1.circle(150, 150, 85);
topCircle1.attr({
stroke: 'none',
fill: '#b9e1d2'
});
$(maleArc1.node)
.attr('id', 'blue')
.tooltipster({
content: 'Male characters',
theme: 'tooltipster-shadow'
});
$(genderlessArc1.node)
.attr('id', 'white')
.tooltipster({
content: 'Genderless characters',
theme: 'tooltipster-shadow'
});
$(customArc1.node)
.attr('id', 'purple')
.tooltipster({
content: 'Custom gender characters',
theme: 'tooltipster-shadow'
});
$(femaleArc1.node)
.attr('id', 'pink')
.tooltipster({
content: 'Female characters',
theme: 'tooltipster-shadow'
});
$('#genderChart1 > svg').attr('id', 'chart');
// END GENDER CHART 1
var draw = SVG('drawing'),
nested = draw
.viewbox(0, 0, 300, 200)
.nested()
.viewbox(-50, 20, 200, 300),
path = draw.path('M150 0 L75 200 L225 200 Z')
.rotate(25)
.scale(0.5);
$(path.node)
.attr('id', 'triangle')
.append('<title>Triangle</title>')
.tooltipster({
theme: 'tooltipster-shadow'
});
$('#circle circle').tooltipster({
restoration: 'previous'
});
$('#circle tspan').tooltipster();
});
</script>
</head>
<body>
<section class="container tooltip hover" title="Block element">
<a href="http://google.com" class="tooltip hover" title="Inline element">Google</a>
</section>
<div id="square" class="tooltip hover" title="Fixed origin"></div>
<section class="container">
<p><span id="custom_mouse_hover" class="circle" title="Hello"></span> Mouseenter + mouseleave</p>
<p><span id="custom_mouse_click" class="circle" title="Hello"></span> Mouse click</p>
<p><span id="custom_touch_hover" class="circle" title="Hello"></span> Touchstart + touchleave + delay 0</p>
<p><span id="custom_touch_tap" class="circle" title="Hello"></span> Touch tap in & out</p>
<p><span id="custom_touch_hoverinteractive" class="circle" title="Hello"></span> Touchstart + touchleave + interactive</p>
<p><span id="custom_touch_tapinteractive" class="circle" title="Hello"></span> Tap in & out + interactive</p>
<p><span id="custom_touch_clicktapscroll" class="circle" title="Hello"></span> Click/Tap in & scroll out</p>
</section>
<section class="container">
<img src="geometry.jpg" usemap="#map" />
<map id="map" name="map"><area shape="rect" title="Rectangle" coords="360,30,442,208" class="tooltip hover" /><area shape="circle" title="Circle" coords="98,113,66" class="tooltip hover" /><area shape="poly" title="Polygon" coords="228,52,331,236,193,166" class="tooltip hover" /></map>
</section>
<section id="inline_container" class="container">
<p>Lorem ipsum dolor sit amet, <strong class="tooltip hover inline" title="First">consectetur adipisicing elit</strong>. Magni omnis, molestias natus sit odio aliquid expedita quibusdam asperiores ducimus eos, tenetur quasi dolores quae iste quaerat, maxime consectetur ab repellendus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio placeat sunt quasi laudantium. <strong class="tooltip hover inline" title="First">Voluptatum consectetur voluptatem rem, sapiente, neque vero esse dicta veritatis accusamus!</strong> Obcaecati at in ad sit odio aliquid expedita quibusdam asperiores ducimus eos, tenetur quasi dolores quae iste quaerat, maxime consectetur!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio placeat sunt quasi laudantium. <strong class="tooltip hover inline" title="First">Voluptatum consectetur tempor voluptatem rem, sapiente, neque vero esse dicta veritatis accusamus reprehenderit eos deserunt eleifend!</strong> Obcaecati at in ad sit odio aliquid expedita quibusdam asperiores ducimus eos, tenetur quasi dolores quae iste quaerat, maxime consectetur!</p>
<p><strong class="tooltip hover inline" title="First">Quasi consequuntur aut, mollitia, tempore exercitationem rerum neque ad, expedita deserunt dolores alias<br />quae assumenda id facere cum laudantium tenetur corrupti ipsam deleniti quas eveniet ratione sit nulla officia recusandae.</strong></p>
<!-- this paragraph is a demonstration of issue #491 and our included fix for it -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio placeat sunt quasi laudantium. <strong class="tooltip hover inline target" title="First"><i>Voluptatum</i> <i>consectetur</i> <i>tempor</i> <i>voluptatem</i> rem, sapiente, neque vero esse dicta veritatis accusamus reprehenderit eos deserunt eleifend!</strong> Obcaecati at in ad sit odio aliquid expedita quibusdam asperiores ducimus eos, tenetur quasi dolores quae iste quaerat, maxime consectetur!</p>
</section>
<section id="scrollable" class="container">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<b class="tooltip click" title="My origin is in a scrollable area">Heading with a tooltip</b>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<div id="scrollable2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<b class="tooltip click" title="My origin is in a scrollable area inside a scrollable area">Heading with a tooltip</b>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</section>
<section class="container">
SVG
<div id="genderChart1"></div>
<div id="drawing"></div>
<svg id="circle">
<text y="20">
<tspan x="10" title="line 1">tspan line 1</tspan>
<tspan x="10" dy="15" title="line 2">tspan line 2</tspan>
<tspan x="10" dy="15" title="line 3">tspan line 3</tspan>
</text>
<circle cx="150" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
<title>Circle</title>
</circle>
</svg>
</section>
</body>
</html>