Home

Awesome

GrapesJS Tooltip

Simple, CSS only, tooltip component for GrapesJS

Demo

Summary

Options

OptionDescriptionDefault
idThe ID used to create tooltip block and componenttooltip
labelTooltipLabel of the tooltip. Used for the block and component nameTooltip
blockTooltipObject to extend the default tooltip block, eg. { label: 'Tooltip', category: 'Extra', ... }. Pass a falsy value to avoid adding the block{}
propsTooltipObject to extend the default tooltip properties, eg. { name: 'Tooltip', droppable: false, ... }{}
extendTraitsA function which allows to extend default traits by receiving the original array and returning a new onetraits => traits
attrTooltipTooltip attribute prefixdata-tooltip
classTooltipTooltip class prefixtooltip-component
styleCustom CSS styles, this will replace the default one''
styleAdditionalAdditional CSS styles''
privateClassesMake all tooltip relative classes privatetrue
showTooltipOnStyleIf true, force the tooltip to be shown when you're styling ittrue
stylableTooltipIndicate if the tooltip can be styled. You can also pass an array of which properties can be styled. Eg. ['color', 'background-color']check the source...

Download

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-tooltip.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-tooltip'],
      pluginsOpts: {
        'grapesjs-tooltip': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import pluginTooltip from 'grapesjs-tooltip';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [pluginTooltip],
  pluginsOpts: {
    [pluginTooltip]: { /* options */ }
  }
  // or
  plugins: [
    editor => pluginTooltip(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/GrapesJS/components-tooltip.git
$ cd grapesjs-tooltip

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause