代码拉取完成，页面将自动刷新
Tooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework required. http://ytiurin.github.io/html5tooltipsjs
npm install html5tooltipsjs
or
bower install html5tooltipsjs
The simplest way to tie a tooltip to a specific UI element is to add a data-* attribute to an element's HTML code.
<span data-tooltip="Refresh"></span>
Add extra attributes to customize a tooltip.
<span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo"
data-tooltip-animate-function="foldin"></span>
To customize multiple tooltips with less of code, add a data-* attribute to their shared parent element (or document body).
<body data-tooltip-animate-function="foldin">
<div data-tooltip-color="bamboo">
<span data-tooltip="Build"></span>
<span data-tooltip="Refresh"></span>
<span data-tooltip="Delete"></span>
</div>
</body>
You may use a JavaScript constructor to abstract from your view layer.
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});
There is an extra feature in html5tooltips.js that allows to show extended text in the tooltip, when user focuses on input field and editable element. You can use plain text or HTML formatting.
html5tooltips({
contentText: "Not less then 8 symbols",
contentMore: "Use lower and UPPER case letters, num<span style='color:red'>6</span>ers and spec<span style='color:red'>!</span>al symbols to make password safe and secure.",
maxWidth: "180px",
targetSelector: "#password"
});
Define multiple tooltips by passing an array of tooltip objects to the Javascript constructor.
html5tooltips([
{
animateFunction: "spin",
color: "#FF0000",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
},
{
contentText: "Simple to remember",
contentMore: "Check that your login name is not used by anyone else.",
stickTo: "left",
maxWidth: "180px",
targetSelector: "#username"
}
]);
To modify tooltip presentation, simply apply styling to it's root element .html5tooltip-box. Properties background-color, color, border-radius, box-shadow, font-family and font-size will propogate to the tooltip text container and pointer.
.html5tooltip-box
{
background-color: #2A2A2A;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 10px rgba(255,255,255,.15);
color: #F7F7F7;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
Refresh tooltips when you update declarative announcement of tooltips or when DOM change, affecting tooltips target elements.
html5tooltips.refresh();
var tooltip = new HTML5TooltipUIComponent;
var target = document.getElementById("refresh");
tooltip.set({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
target: target
});
target.addEventListener('mouseenter',function(){
tooltip.show();
});
target.addEventListener('mouseleave',function(){
tooltip.hide();
});
tooltip.mount();
var tooltip = html5tooltips.getTooltipByTarget(document.getElementById('myElement'));
tooltip.destroy();
fadein, foldin, foldout, roll, scalein, slidein, spin. Default value fadein.daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper.500.300.true or false. Default value is false.hideDelay number of milliseconds before hide. Default value is false.bottom, left, right, top. Default value is bottom.number of pixels that represent the distance between the tooltip and a target element.data-* attributescontentText parameter.animateFunction parameter.disableAnimation parameter.color parameter.delay parameter.hideDelay parameter.maxWidth parameter.contentMore parameter.persistent parameter.stickTo parameter.Tooltips are compatible with old browsers including IE7. Animation works in Chrome 1.0, Firefox 2.0, Internet Explorer 10, Opera 10.5, Safari 3.2.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手