<standard:tooltip>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip
DESCRIPTION
ATTRIBUTES
arrowPosition
content
hideOn
id
showOnLoad
target
position
EXAMPLES
Icon with Tooltip
standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<standard:tooltip>` </...>

Creates a tooltip / speech bubble.

Attributes

- `arrowPosition`
string
A specific location for the arrow on the ToolTip may be selected.

If omitted, the ToolTip arrow will appear in the most sensible location for the given 'position' attribute.

Possible Values:
topleft top topright right bottomright bottom bottomleft left
- `content`
string
Content of the tooltip
- `hideOn`
string
Event(s) which will trigger the ToolTip to be hidden.
- `id`
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `showOnLoad`
bool
When set to true, the ToolTip will show itself immediately upon page load. e.g. when the document.ready() event is triggered
- `target`
string
A CSS selector for targeting the HTML element the tooltip will be positioned in relation to.
- `position`
string
Positions the ToolTip at a location around the given target element.

If omitted, the default location is at the bottom of the target element.

Possible Values:
topleft top topright right bottomright bottom bottomleft left

Examples

Icon with Tooltip

A tooltip text will display when the mouse cursor is over the icon

HTML:

 <standard:tooltip content="Please enter a description of the tool tip. The maximum length is 3 lines. Arrows can be adjusted position." position="top"> <standard:icon library="fontawesome" name="info-circle" size="4" style="width: 33px; height: 33px; color: #61c4e0; padding: 6px" /> </standard:tooltip>

Run Example