Dataset syntax

This alternative syntax allows to enable popovers on any HTML element by adding the appropriate HTML dataset. This can be useful, for example, to enable a popover on an HTML table row, which the HTML specification does not allow to be nested within another element, or simply if you prefer this syntax.

Usage

Using the coupdoeil_popover_dataset view helper:

<button <%= coupdoeil_popover_dataset(ProjectPopover.search) %> type="button">
  Search
</button>
<!-- instead of -->
<%= coupdoeil_popover_tag ProjectPopover.search do %>
  <button type="button">Search</button>
<% end %>

Once hovered or clicked, depending on the popover’s trigger, the element will be upgraded to be a custom coup-doeil element. It means that the element will be the target relative to which the popover is positioned. It will also gain some popover behavior such as openPopover() and closePopover() functions (see control popover). Finally, this element will have the customCoupdoeilElement property set to true, if you need to inspect it for any reason.

Dataset format

If you are using a different view templating engine, such as slim or haml, you may want to change the returned for of the dataset. This can be done by using the :format keyword argument, the appropriate value depending on the use case.

/ when dataset is only composed of the popover options
= button_tag "Search",
             type: :button,
             coupdoeil_popover_dataset(ProjectPopover.search, format: :nested)
/ or
= button_tag "Search",
             type: :button,
             data: coupdoeil_popover_dataset(ProjectPopover.search, format: :raw)


/ when dataset contains other attributes 
= button_tag "Search",
             type: :button,
             data: { **coupdoeil_popover_dataset(ProjectPopover.search, format: :raw),
                     other_dataset_attribute: "value" }

= button_tag "Search",
             type: :button,
             data: { other_dataset_attribute: "value" },
             coupdoeil_popover_dataset(ProjectPopover.search, format: :prefixed)

Check the coupdoeil_popover_dataset helper documentation for the details on the returned formats.

The default format value can be configured so you don’t have to set it every time. See default_dataset_format configuration option.

Manually upgrading an element

Note that the upgrade occurs once and only on the first time the popover is triggered. If you need to manually upgrade an element, you can do it this way:

const element = document.querySelector('...')
Coupdoeil.upgradeNativeElement(element)

Make sure to upgrade the element carrying the popover dataset, or it will raise an error. Calling upgradeNativeElement on an already upgraded element won’t have any effect.

To downgrade an already upgraded element, call downgradeNativeElement(element). To downgrade an element that had never been upgraded, call downgradeNativeElement(element, {force: true}).