Advanced Tooltips for any Element

The Tooltip element offers the following customizable properties:

[ml][ul][li indent=0 align=left][b]Element ID:[/b] The defined ID of a Bubble element. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance.[/li][/ul][/ml][quote][color=rgb(136, 136, 136)]Please notice, even though in the Demo all elements have the same ID, this is a really bad practice as explained by [/color][color=rgb(102, 163, 224)][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id][u]Mozilla[/u][/url][/color][color=rgb(136, 136, 136)]: "The id global attribute defines an identifier (ID) which must be unique in the whole document." [/color][/quote][ml][ul][li indent=0 align=left][b]Allow HTML: [/b][b][color=rgb(81, 81, 104)]Determines if [/color][/b][color=inherit][b]content[/b][/color][b][color=rgb(81, 81, 104)] strings are parsed as HTML instead of text.[/color][/b][/li][li indent=0 align=left][b]Contet:[/b] [b][color=rgb(81, 81, 104)]The content of the tooltip.[/color][/b][/li][li indent=0 align=left][b]Placement:[/b] [b][color=rgb(81, 81, 104)]Positions the tooltip relative to its reference element.[/color][/b][/li][li indent=0 align=left][b]Trigger:[/b] [b][color=rgb(81, 81, 104)]The events (each separated by a space) which cause a tooltip to show.[/color][/b][/li][li indent=0 align=left][b]Animation: [/b][b][color=rgb(81, 81, 104)]The type of transition animation.[/color][/b][/li][li indent=0 align=left][b]Arrow: [/b][b][color=rgb(81, 81, 104)]Determines if the tooltip has an arrow.[/color][/b][/li][li indent=0 align=left][b]Delay: [/b][b][color=rgb(81, 81, 104)]Delay in ms once a trigger event is fired before a tippy shows or hides.[/color][/b][/li][li indent=0 align=left][b]Follow Cursor: [/b][b][color=rgb(81, 81, 104)]Determines if the tooltip follows the user's mouse cursor.[/color][/b][/li][li indent=0 align=left][b]Background Color: [/b][b][color=rgb(81, 81, 104)]Determines the tooltip background color.[/color][/b][/li][li indent=0 align=left][b]Text Color: [/b][b][color=rgb(81, 81, 104)]Color of the text inside the tooltip.[/color][/b][/li][li indent=0 align=left][b]Hide On Click: [/b][b][color=rgb(81, 81, 104)]Determines if the tippy should hide if a mousedown event was fired outside of it (i.e. clicking on the reference element or the body of the page).[/color][/b][/li][li indent=0 align=left][b]Interactive[/b]: [b][color=rgb(81, 81, 104)]Determines if the tippy is interactive, i.e. it can be hovered over or clicked without hiding.[/color][/b][/li][/ul][/ml]