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:audio 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