在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:ytiurin/html5tooltipsjs开源软件地址:https://github.com/ytiurin/html5tooltipsjs开源编程语言:JavaScript 72.2%开源软件介绍:html5tooltips.jsTooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework required. http://ytiurin.github.io/html5tooltipsjs Install
or
Simple usageThe simplest way to tie a tooltip to a specific UI element is to add a <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> Customization inheritanceTo customize multiple tooltips with less of code, add a <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> Advanced usageYou 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"
}
]); StylingTo modify tooltip presentation, simply apply styling to it's root element .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;
} For Single Page ApplicationsRefresh tooltips when you update declarative announcement of tooltips or when DOM change, affecting tooltips target elements. html5tooltips.refresh(); HTML5Tooltip UI Componentvar 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(); Get a tooltip by the target elementvar tooltip = html5tooltips.getTooltipByTarget(document.getElementById('myElement'));
tooltip.destroy(); List of possible parameters
List of possible |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论