Skip to content

alexserver/ractive-tooltip

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#ractive-tooltip

Tooltip in action

Demo

Live Demo

Install

npm install ractive-tooltip --save

Usage

Add the tooltip to your Ractive instance:

Ractive.extend({
    ...
    decorators: {
        tooltip: require('ractive-tooltip')
    },
    ...
});

Use it

<div decorator='tooltip:Tooltip for some {{thing}}'>I'm a {{thing}}</div>
<div decorator=‘tooltip:{{#if showHelp}}Do this and that to do this or that!{{/if}}”/>
<div decorator=‘tooltip:{{translate dragHelpMessage}}”/>

Includes minimal styling under the class .ractive-tooltip-container. Styles are included in the javascript and added to the page on load this is ideal since a script like this is best loaded async after the initial page scripts have been loaded. If you don't want these styles in the javascript, copy src/tooltip.js and remove the require('./styles.styl').

API

Open to PRs and stuff. I'm around.

About

A nice, customizable tooltip decorator for ractive that will ensure it's visible on the screen.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.7%
  • CSS 35.3%