<u1-tooltip> - element

Tooltips

Features

• hover or focus
• if it has tabindex="-1", it will not disappear when hovered
• position: top, right, bottom, left
• will stay inside the viewport
• event "u1-tooltip-show" when shown

Usage

<button>
    hover or focus
    <u1-tooltip>now you see me</u1-tooltip>
</button>

u1-tooltip {
    pointer-events:auto;
    font-size:max(12px, .7rem);
    --line-height: 1.4em;
    background:#666;
    color:#fff;
    border-radius:.2rem;
}

Install

<link href="https://cdn.jsdelivr.net/gh/u1ui/tooltip.el@x.x.x/tooltip.min.css" rel=stylesheet>
<script src="https://cdn.jsdelivr.net/gh/u1ui/tooltip.el@x.x.x/tooltip.min.js" type=module></script>

Demos

minimal.html
test.html

Todo

• popover when supported by browsers.

About

• MIT License, Copyright (c) 2022 (like all repositories in this organization)
  
• Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥