README

• 介绍
• 要求
• 安装
• 在TWIG中使用
• 在PHP中使用
• 选项

INTRODUCTION

为元素和字段提供工具提示API。它使用Tippy.js库。

https://atomiks.github.io/tippyjs/v6/getting-started/

REQUIREMENTS

此模块不依赖于Drupal核心之外的任何模块。

INSTALLATION

按照您通常安装贡献的Drupal模块的方式安装。有关更多信息，请访问https://www.drupal.org/node/1897420。

USAGE WITHIN TWIG

简单文本

<a{{ attributes.addClass(classes)|neo_tooltip_trigger }}>
  Your content.
  {{ 'Tooltip content'|neo_tooltip_content }}
</a>

构建数组

<a{{ attributes.addClass(classes)|neo_tooltip_trigger({theme: 'badge', placement: 'right', animation: 'shift-toward'}) }}>
  Your content.
  {{ content|neo_tooltip_content }}
</a>

USAGE WITHIN PHP

// Link element.
$build['link'] = [
  '#type' => 'link',
  '#title' => $this->t('Tooltip trigger'),
  '#url' => Url::fromRoute('<front>'),
];
$content = 'Tooltip content';
$tooltip = new Drupal\neo_tooltip\Tooltip($content);
$tooltip
  ->setAnimationToShiftAway()
  ->setPlacementToBottomStart()
  ->setArrow(FALSE)
  ->setTrigger('focusin');
$tooltip->applyTo($build['link']);

// Markup element.
$build['markup'] = [
  '#markup' => '<p>' . $this->t('This is a markup tooltip.') . '</p>',
];
$tooltip = new Tooltip('Tooltip content');
$tooltip->applyTo($build['markup']);

OPTIONS

动画

{
  // default
  trigger: 'fade',
  // others
  trigger: false,
  trigger: 'shift-away',
  trigger: 'shift-toward',
  trigger: 'scale',
  trigger: 'perspective',
}

触发

{
  // default
  trigger: 'mouseenter focus',
  // others:
  trigger: 'click',
  trigger: 'focusin',
  trigger: 'mouseenter click',
  // only programmatically trigger it
  trigger: 'manual',
}

位置

{
  // default
  placement: 'top',

  // full list:
  placement: 'top-start',
  placement: 'top-end',

  placement: 'right',
  placement: 'right-start',
  placement: 'right-end',

  placement: 'bottom',
  placement: 'bottom-start',
  placement: 'bottom-end',

  placement: 'left',
  placement: 'left-start',
  placement: 'left-end',

  // choose the side with most space
  placement: 'auto',
  placement: 'auto-start',
  placement: 'auto-end',
}