Tooltip Position Save

Release 2.17.0+

Persist the user's tooltip position preference in Web Storage by setting editor.tooltip.position.key.

// synapeditor.config.js
{
  'editor.tooltip.position.key': window.location.href + '_se-tooltip-position'
}

Example: Custom Plugin to Toggle Tooltip Position

A simple plugin that toggles tooltips between Top and Bottom. Wire it up to a toolbar button and/or a shortcut.

var customPluginName = 'tooltipPositionToggle';

SynapEditor.addPlugin(customPluginName, function (editor) {
  var UI_STATUS         = SynapEditor.CONST.UI_STATUS;
  var TOOLTIP_POSITION  = SynapEditor.CONST.UI_LAYOUT_VALUE.TOOLTIP_POSITION;
  var ACTION            = SynapEditor.ACTION;   // TOGGLE_TOOLTIP_POSITION_TOP

  return {
    buttonDef: {
      name: customPluginName,
      label: 'Tooltip Position toggle',
      iconSVG: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <text x="-1" y="13" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#000">TP</text>
      </svg>`,
      status: {
        fn: function () {
          var current = editor.getUIManager().getTooltipPosition();
          return {
            status: current === TOOLTIP_POSITION.TOP ? UI_STATUS.ACTIVE : undefined
          };
        }
      },
      onClickFunc: function () {
        editor.execCommand(ACTION.TOGGLE_TOOLTIP_POSITION_TOP);
      }
    },
    shortcutDef: [{
      key:   { windows: 'Ctrl+Alt+T', mac: 'Cmd+Alt+T' },
      option: { action: ACTION.TOGGLE_TOOLTIP_POSITION_TOP }
    }]
  };
});

Register the plugin button on the toolbar:

'editor.toolbar': [ /* ... */ 'tooltipPositionToggle' ]

Result

<table> <thead> <tr><th>Toggling via button click</th><th>Toggling via keyboard shortcut</th></tr> </thead> <tbody> <tr> <td><img src="tooltipPosition_toggle_btn.gif" alt="Toggle by button"></td> <td><img src="tooltipPosition_toggle_shortcut.gif" alt="Toggle by shortcut"></td> </tr> </tbody> </table>