Tooltip

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the tooltip
var el = document.querySelector("#tooltip");
var tooltip = Components.Tooltip({
    el: el,
    btnProps: {
        text: "Tooltip Demo"
    },
    options: {
        title: "My Tooltip",
    }
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the tooltip
let el = document.querySelector("#tooltip");
let tooltip = Components.Tooltip({
    el: el,
    btnProps: {
        text: "Tooltip Demo"
    },
    options: {
        title: "My Tooltip",
    }
});

Web Component

<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-tooltip>
    // Return the tooltip properties
    return {
        btnProps: {
            text: "Tooltip Demo"
        },
        options: {
            title: "My Tooltip",
        }
    };
</bs-tooltip>

References

Tooltip(props:ITooltipProps):ITooltip

TooltipTypes

Name Value
Auto 1
Bottom 2
Left 3
Right 4
Top 5

ITooltip

Name Returns Description
dispose () => void Destroy’s an element’s tooltip.
el Element The jquery element.
enabled () => void Gives an element’s tooltip the ability to be shown.
hide () => void Hides an element’s tooltip.
toggle () => void Toggles an element’s tooltip.
toggleEnabled () => void Toggles the ability for an element’s tooltip to be shown or hidden.
show () => void Shows an element’s tooltip.
update () => void Updates the position of an element’s tooltip.

ITooltipOptions

Name Type Description  
animation boolean Apply a CSS fade transition to the tooltip.  
boundary string Overflow constraint boundary of the tooltip.  
container string Appends the tooltip to a specific element.  
delay _number object_ Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type.
fallbackPlacement _string Array<string>_ Allow to specify which position Popper will use on fallback.
html boolean Insert HTML into the tooltip.  
offset _number string_ Offset of the tooltip relative to its target.
placement string How to position the tooltip (auto, top, bottom, left, right). When auto is specified, it will dynamically reorient the tooltip.  
selector string If a selector is provided, tooltip objects will be delegated to the specified targets.  
template string Base HTML to use when creating the tooltip.  
title string Default title value if title attribute isn’t present.  
trigger string How tooltip is triggered (click, hover, focus, manual). You may pass multiple triggers; separate them with a space. Manual cannot be combined with any other trigger.  

ITooltipProps

Name Type Description
btnProps IButtonProps The button properties.
className string The class name to apply to tooltip.
el HTMLElement The element to render the tooltip to.
options ITooltipOptions The tooltip options.
type number The tooltip type. Reference the TooltipTypes enumerator