hint.scss v0.0.3

copy from hint.css

if you wanna release version, please go to the official website and download, this is a customize sass version

install

npm i --save hint.scss

usage

@import "hint.scss/hint";

<span class="hint--top" aria-label="Thank you!">hover me.</span>
<span class="hint--bottom" data-hint="Thank you!">hover me.</span>

aria-label or data-hint is necessary

customize

this is default variable

$hint-style-default : (bg:#383838,text:#fff) !default;
$hint-styles : (
    error : (bg:#b34e4d,text:#fff),
    warning : (bg:#c09854,text:#fff),
    info : (bg:#3986ac,text:#fff),
    success : (bg:#458746,text:#fff)
) !default;
$hint-prefix : '' !default;

ps:write this before import

change prefix

$hint-prefix : 'ds-';

<span class="ds-hint--bottom" aria-label="Thank you!">hover me.</span>

default style

$hint-style-default : (bg:red,text:green);

custom styles

$hint-styles : (
    haha : (bg:green,text:blue),
    interesting : (bg:orange,text:pink),
) ;

<span class="hint--bottom haha" aria-label="Thank you!">hover me.</span>
<span class="hint--top interesting" data-hint="Thank you!">hover me.</span>