Napoleonic Political Magnificence

    spiketip-tooltip

    1.1.2 • Public • Published

    SpikeTip Tooltip

    npm version

    Sleek tooltips spun from CSS

    Javascript? Nah. Create effortless tooltips that breathe CSS! No Javascript. Just the good old CSS.

    Demo & Playground

    You can check more exaples at the website: https://spiketip.com

    You can play with SpikeTip here: https://jsfiddle.net/Baliga/v72fyh6z/

    Usage

    Installation

    Using npm: (prerequisites: css-loader, style-loader)

    npm install spiketip-tooltip
    
    import 'spiketip-tooltip/spiketip.min.css'

    Manually: Simply download spiketip.min.css from this repo and add it to your HTML. e.g.

    <link rel="stylesheet" href="path/to/spiketip.min.css">

    Alternatively, you can use it via CDN (provided by jsdelivr):

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spiketip-tooltip@1.1.1/spiketip.min.css">

    Positioning

    For positioning, use spiketip-pos attribute with one of the values: top, bottom, left, right, top-left, top-right, bottom-left or bottom-right:

    <button spiketip-title="Whats up!" spiketip-pos="top">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="left">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="right">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="bottom">Hover me!</button>
     
    <button spiketip-title="Whats up!" spiketip-pos="top-left">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="top-right">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="bottom-left">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="bottom-right">Hover me!</button>

    Color Options

    For positioning, use spiketip-color attribute with one of the values: success, error, warning, info:

    <button spiketip-title="Whats up!" spiketip-pos="top" spiketip-color="success">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="left" spiketip-color="error">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="right" spiketip-color="warning">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="bottom" spiketip-color="info">Hover me!</button>
     
    <button spiketip-title="Whats up!" spiketip-pos="top-left" spiketip-color="warning">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="top-right" spiketip-color="info">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="bottom-left" spiketip-color="success">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="bottom-right" spiketip-color="error">Hover me!</button>

    Size

    For sizing, use spiketip-length attribute with one of the values: sm, md, lg, xl, auto:

    <button spiketip-title="Whats up!" spiketip-pos="top" spiketip-length="sm">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="left" spiketip-length="md">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="right" spiketip-length="lg">Hover me!</button>
    <button spiketip-title="Whats up!" spiketip-pos="bottom" spiketip-length="xl">Hover me!</button> 
    <button spiketip-title="Whats up!" spiketip-pos="bottom" spiketip-length="auto">Hover me!</button> 

    Showing tooltips programatically

    If you want to show tooltips even when user interaction isn't happening, you can simply use the spiketip-visible attribute:

    <button spiketip="Whats up!" spiketip-pos="up" id="tooltip-element">Hover me!</button>
    <script>
      const btn = document.getElementById('tooltip-element')
      btn.setAttribute('spiketip-visible', '')
    </script> 

    Credits

    Developed with ❤ by Vishnu_Baliga

    Install

    npm i spiketip-tooltip

    DownloadsWeekly Downloads

    6

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    243 kB

    Total Files

    11

    Last publish

    Collaborators

    • baliga