Custom Attributes

Bricks 1.3 introduces the possibility to add your own custom HTML attributes to any element.

You can add custom attributes under “Style > Attributes”. Set a “Name” and a “Value” and your attribute(s) will be added to the elements’ most relevant node. By default, your attributes are added to the element root node. Besides manually entered values you can populate your custom attributes with dynamic data, too.

In there you’ll be able to insert multiple attributes (name and value). You’ll also be able to use Dynamic Data in both name and value fields.

Container: Custom Attributes

Let’s say you want to add an ARIA role and label to a container that contains multiple images that should be considered as a single image. You’d add the following two attributes when editing your container:

  • Attribute #1 name: role
  • Attribute #1 value: img
  • Attribute #2 name: aria-label
  • Attribute #2 name: Description of the overall image

This results in the following container HTML:

<div id="bricks-element-sfglik" class="bricks-element-sfglik bricks-container" role="img" aria-label="Description of the overall image">
... Container elements ...

Custom attributes precede default attributes. So if you set a custom alt attribute when editing your image, this custom attribute will be used instead of the default image alt attribute.

Elements where custom attributes are added to the following specific HTML tags:

Bricks ElementHTML tag
Nav Menu<nav>
Heading<h1> or any other heading tag
Text<div class=”text-wrapper”>
Button<a> or <span> depending if there is a link
Video<div class=”bricks-video-wrapper”>

How To Add Tooltips

Bricks comes with built-in (CSS-only) tooltips that you can set via custom attributes. Make sure to set the attribute “Name” to data-balloon and the value to one of the following to define your tooltip position:

  • top | top-right | top-left
  • right
  • bottom | top-bottom | top-bottom
  • left