A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/GrapesJS/components-tooltip below:

GrapesJS/components-tooltip: Simple, CSS only, tooltip component for GrapesJS

Simple, CSS only, tooltip component for GrapesJS

Demo

Option Description Default id The ID used to create tooltip block and component tooltip labelTooltip Label of the tooltip. Used for the block and component name Tooltip blockTooltip Object to extend the default tooltip block, eg. { label: 'Tooltip', category: 'Extra', ... }. Pass a falsy value to avoid adding the block {} propsTooltip Object to extend the default tooltip properties, eg. { name: 'Tooltip', droppable: false, ... } {} extendTraits A function which allows to extend default traits by receiving the original array and returning a new one traits => traits attrTooltip Tooltip attribute prefix data-tooltip classTooltip Tooltip class prefix tooltip-component style Custom CSS styles, this will replace the default one '' styleAdditional Additional CSS styles '' privateClasses Make all tooltip relative classes private true showTooltipOnStyle If true, force the tooltip to be shown when you're styling it true stylableTooltip Indicate 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...

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 */ }),
  ],
});

Clone the repository

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

Install dependencies

Start the dev server

BSD 3-Clause

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4