In this simple recipe, we utilized the options provided by the tether library to alter the behavior of our popup.
The options we adjusted involve both using the HTML data-* attributes and the JavaScript options as described in the tether documentation, namely constraint options and offset options.
Looking at the HTML attributes, we can see that the options we can use include the title attribute, which gives a card-like styling to the popover's heading (title).
Looking at the JS options, we can inspect the code called on document ready:
$(function () { $('[data-toggle="popover"]').popover({ trigger: 'hover', // trigger: 'focus', delay: { "show": 500, "hide": 100 }, attachment: 'top left', targetAttachment: 'top right', constraints: ...
