FlexTip Documentation


Markup
Typically a FlexTip is created by adding the "flextip" class to a div and you use data-attributes to configure that particular FlexTip. 

<div class="flextip"
    data-target-id="myFlexTip"
    data-target-annotationStyle="none"
    data-target-iconColor="#ccc"
    data-trigger="hover"
    data-auto-close="true"
    data-position="top"
    data-align="center" 
    data-styles-css-class=""
    data-styles-padding="5px 10px"
    data-styles-background-color="#f6f6f6"
    data-styles-border-radius="4px"
    data-styles-transition="opacity 0.5s"
    data-styles-boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)"
    data-gap="20"
    data-arrow-use="true"
    data-arrow-size="5px"
    data-padding="10px"
    data-zindex="1000"
    >
    Some Content
</div>
Default configuration
Use FlexTip.configure(<options object>) to set default configuration for all FlexTips on a page. 

    FlexTip.configure({
        trigger: "hover",
        autoClose: true,
        position: "top",
        align: "center",
        gap: "5px",
        zIndex: 1000,
        target: {
            annotationStyle: "none",
            iconColor: "#ccc"
        },
        arrow: {
            use: true,
            size: "5px"
        },
        styles: {
            cssClass: "",
            padding: "5px 10px",
            backgroundColor: "#f6f6f6",
            borderRadius: "4px",
            transition: "opacity 0.5s",
            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
        },
        scrim: {
            opacity: 0,
            backgroundColor: "transparent"
        }
    });
Data- attributes
Description of all possible data- attributes used to configure an individual FlexTip.

Attribute Values Description
class flextip
  • Mandatory.
  • A div with class="flextip" will be changed into a tip.
id html id
  • Optional.
  • An id attribute is convenient if you want to programmatically open and/or close the tip.
data-trigger click | hover
  • Optional.
  • Default value : hover
  • hover : the user needs to hover on the element specified by data-target to open the tip. hover is changed to click on mobile.
  • click : the user needs to click on the element specified by data-target to open the tip.
data-auto-close true | false
  • Optional.
  • Default value : true
  • Whether to close the tooltip when the user clicks inside of it, eg. if the user clicks a link inside the tooltip.
  • true : the tooltip closes when the user clicks inside the tooltip.
  • false : the tooltip does NOT close when the user clicks inside the tooltip.
data-position top | right | bottom | left
  • Optional.
  • Default value : top
  • top : the tip will preferably show over the trigger.
  • right : the tip will preferably show to the right of the trigger.
  • bottom : the tip will preferably show under the trigger.
  • left : the tip will preferably show to the left of the trigger.
  • Note that if there is not enough space for the tip to show at its preferred position, the FlexTip will investigate the space available and find the most appropriate place to show the trigger.
data-align start | center | end
  • Optional.
  • Default : center
  • Alignment of the tooltip relative to the target.
  • start : aligns the tooltip to the start of the target, eg. if position=top then align=start will align the left edge of the tooltip to the left edge of the target.
  • center : aligns the center of the tooltip to the center of the target, eg. if position=top then align=center will position the tooltip so the center of the tooltip is over the center of the target.
  • end : aligns the tooltip to the end of the target, eg. if position=top then align=end will align the right side of the tooltip to the right side of the target.
data-gap
data-z-index number
  • Optional.
  • Default : 1000
  • Sets the z-index of this particular drawer to accommodate any particular situation where the drawer slides.
target
data-target-id html id
  • Optional.
  • Specifies an element on the page that will trigger the tip, when either clicked on or hovered, eg. if set to btnTest, FlexTip will try to find an element with the id="btnTest" and attach an event handler to that element that when activated will open the tip.
  • If data-target is NOT set, FlexTip will create a trigger where the FlexTip element, <div class="flextip" ...> is defined.
data-target-annotation-style superscript | underline | bracket | none
  • Optional.
  • It is common to indicate a trigger as such, eg. if the trigger is a word in plain text, an indication is a good idea so the user can see that there is action on this word.
  • superscript : will place an "i" sign as superscript after the trigger.
  • underline : will place a line under the trigger.
  • bracket : will set a "[?]" just after the trigger.
  • none : will not indicate the trigger, use none if you either don't want any indication of the trigger or if you want to make your own custom indication.
data-target-icon-color html color
  • Optional.
  • In use ONLY if the data-target is NOT set, in which case FlexTip will create a trigger, where the FlexTip element is defined. This icon will be an informational symbol ℹ and data-icon-color will set the color of that symbol.
arrow
data-arrow-use true | false
  • Optional.
  • Default : true
  • Whether to attach an arrow to the tooltip.
data-arrow-size
  • Optional.
  • Default : "5px"
styles
data-styles-background-color html color | none
  • Optional.
  • Default value : #f6f6f6
  • html color : can be specified in any html valid way, eg. hex, named or rgba say #ff0000, red or rgba(255, 0, 0, 0.8).
  • none : the background color will not be set, use this if you want to specify the background color of the tip eg. directly on the tip element.
data-styles-css-class
data-styles-padding
data-styles-border-radius
data-styles-transition
data-styles-box-shadow
API
FlexTip.create()
myFlexTip.update(options, content)
myFlexTip.updateContent(content)