Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-tooltipper

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tooltipper

Create and trigger responsive tooltips for your ReactJS apps

  • 0.7.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12
increased by33.33%
Maintainers
1
Weekly downloads
 
Created
Source

React Tooltipper

NOTE: This is a fork of the react-joyride project created mostly for utilitarian reasons, and it is in the very early stages of development. Things may break.

Create and trigger responsive beacons and tooltips for your ReactJS apps using this React mixin. It can be used to show either clickable beacons that will open tooltips or simply the open tooltips themselves. All beacons and tooltips are dynamically positioned so as to appear attached to their target elements, and will reposition themselves on resizing, etc.

Install

npm install --save react-tooltipper
var react = require('react/addons');
var tooltipper = require('react-tooltipper').Mixin;

var App = React.createClass({
  mixins: [React.addons.PureRenderMixin, tooltipper],
  ...
});

This mixin can change state often, so you might want to use React.addons.PureRenderMixin in your components as well.

Styles

If your are using SCSS:

@include 'react-tooltipper/lib/styles/react-tooltipper'

Or include this directly in your html:

<link rel="stylesheet" href="react-tooltipper/lib/styles/react-tooltipper.css" type="text/css">

Getting Started

Set the options for your tooltips when the controller view component mounts.

this.tooltipperSetOptions({
    completeCallback: () => {},
    doDebounceResize: true,
    scrollOffset: 90,
    showOverlay: false,
    scrollToTooltip: true
});

Define your tooltips whenever you'd like (prior to triggering):

const tooltips = [{
    title: 'Tooltip Title',
    text: 'Some text for the tooltip.',
    selector: '.some-selector',
    position: 'bottom'
}, . . . ];

When you'd like, add your tooltip and trigger it:

this.tooltipperSetTooltipData(tooltips[0]); // or whatever tooltip element you'd like
this.tooltipperTrigger();
componentDidMount: function () {
    this.tooltipperSetTooltipData([{...}])]
}

API

this.tooltipperSetOptions(options)

Change the initial options during componentWillMount. All optional.

  • options {object} - One or more of the options below.

completeCallback {function}: It will be called after a closes the tooltip. Defaults to undefined

doDebounceResize {boolean}: Do or do not debounce the resize event listenre. Defaults to true

scrollOffset {number}: The scrollTop offset used in scrollToTooltip. Defaults to 20

scrollToTooltip {boolean}: Scroll the page to the next tooltip if needed. Defaults to true

showOverlay {boolean}: Display an overlay with holes above your tooltips. Defaults to true

tooltipOffset {number}: The tooltip offset from the target. Defaults to 30

this.tooltipperSetTooltipData(tooltipData)

Set up a tooltip to be shown on the next call to this.tooltipperTrigger.

  • tooltipData {object} - Data describing the tooltip, as in the example below.
this.tooltipperSetTooltipData([
	{
		title: "", //optional
		text: "...",
		selector: "...",
		position: "..."
	},
	...
]);

this.tooltipperTrigger(autorun)

Call this method to trigger the tooltip defined with this.tooltipperSetTooltipData.

  • autorun {boolean} - Optional; displays the tooltip in an already opened state (no beacon to click)

tooltipData Syntax

There are 4 usable options but you can pass extra parameters.

  • title: The title of the tooltip (optional)
  • text: The tooltip's body (required)
  • selector: The target DOM selector to which your tooltip will "attach" (required)
  • position: Relative position of you beacon and tooltip. It can be one of these: right, left, top, top-left, top-right, bottom, bottom-left, bottom-right and center. This defaults to top.

Example:

{
    title: 'First Tooltip',
    text: 'Start using the tooltipper',
    selector: '.first-tooltip',
    position: 'bottom-left',
    ...
    name: 'my-first-tooltip',
    parent: 'MyComponentName'
}

SCSS Options

Basic
  • $tooltipper-color: The base color. Defaults to #f04
  • $tooltipper-zindex: Defaults to 1500
  • $tooltipper-overlay-color: Defaults to rgba(#000, 0.5)
  • $tooltipper-beacon-color: Defaults to $tooltipper-color
  • $tooltipper-beacon-size: Defaults to 36px
  • $tooltipper-hole-border-radius: Defaults to 4px
  • $tooltipper-hole-shadow: Defaults to 0 0 15px rgba(#000, 0.5)
Tooltip
  • $tooltipper-tooltip-arrow-size: You must use even numbers to avoid half-pixel inconsistencies. Defaults to 28px
  • $tooltipper-tooltip-bg-color: Defaults to #fff
  • $tooltipper-tooltip-border-radius: Defaults to 8px
  • $tooltipper-tooltip-color: The header and text color. Defaults to #555
  • $tooltipper-tooltip-font-size: Defaults to 16px
  • $tooltipper-tooltip-padding: Defaults to 20px
  • $tooltipper-tooltip-shadow: Defaults to drop-shadow(2px 4px 4px rgba(#000, 0.5))
  • $tooltipper-tooltip-width: Sass list of Mobile / Tablet / Desktop sizes. Defaults to (290px, 360px, 450px)
  • $tooltipper-header-color: Defaults to $tooltipper-tooltip-header-color
  • $tooltipper-header-font-size: Defaults to 20px
  • $tooltipper-header-border-color: Defaults to $tooltipper-color
  • $tooltipper-header-border-width: Defaults to 1px
  • $tooltipper-button-bg-color: Defaults to $tooltipper-color
  • $tooltipper-button-color: Defaults to #fff
  • $tooltipper-button-border-radius: Defaults to 4px
  • $tooltipper-back-button-color: Defaults to $tooltipper-color
  • $tooltipper-skip-button-color: Defaults to #ccc

License

Copyright © 2015 Jason Rogers - MIT License


Forked from react-joyride

Keywords

FAQs

Package last updated on 27 Oct 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc