Frontbx

Markup
Direction
CSS Customization

Markup

Frontbx comes with a simple CSS tooltip that's easy to use. Simple add the .tooltipped class with the direction .tooltipped-[direction] you want the toooltip to be displayed.

Then add the content you want displayed as the data-tooltip attribute.

    <button class="tooltipped tooltipped-n" data-tooltip="Hello World!">...</button>

Direction

Use the directional classes .tooltipped-[direction] to change the direction of tooltip.

<button class="btn tooltipped tooltipped-ne" data-tooltip="Hello World!">
    .tooltipped-ne
</button> 
<button class="btn tooltipped tooltipped-n" data-tooltip="Hello World!">
    .tooltipped-n
</button>
<button class="btn tooltipped tooltipped-nw" data-tooltip="Hello World!">
    .tooltipped-nw
</button>
<button class="btn tooltipped tooltipped-se" data-tooltip="Hello World!">
    .tooltipped-se
</button> 
<button class="btn tooltipped tooltipped-s" data-tooltip="Hello World!">
    .tooltipped-s
</button>
<button class="btn tooltipped tooltipped-sw" data-tooltip="Hello World!">
    .tooltipped-sw
</button>
<button class="btn tooltipped tooltipped-e" data-tooltip="Hello World!">
    .tooltipped-e
</button>
<button class="btn tooltipped tooltipped-w" data-tooltip="Hello World!">
    .tooltipped-w
    </button>

CSS Customization

The grid system uses a combination of both local CSS variables on all components for enhanced component customization and styling. The base values are used by the UI to create all the sizing. Values for the CSS variables are set via Sass, so pre-compilation customization is still supported too.

Default values are set in the scss/_config.scss file in Frontbx's source.

.tooltipped
{
    --fbx-tooltip-bg: var(--fbx-color-hotpink);
    --fbx-tooltip-font-size: 13px;
}

scss/_config.scss

$tooltip-bg:                    var(--fbx-gray-900) !default;
$tooltip-color:                 var(--fbx-white) !default;
$tooltip-font-size:             11px !default;
$tooltip-font-weight:           $text-light !default;
$tooltip-line-height:           20px !default;
$tooltip-radius:                var(--fbx-border-radius) !default;
$tooltip-pad-y:                 2px !default;
$tooltip-pad-x:                 8px !default;
$tooltop-target-space:          5px !default;
$tooltop-target-space-neg:      -5px !default;```

scss/components/_tooltip.scss

.tooltipped
{
    --fbx-tooltip-bg: var(--fbx-gray-900);
    --fbx-tooltip-color: var(--fbx-white);
    --fbx-tooltip-font-size: 11px;
    --fbx-tooltip-font-weight: 300;
    --fbx-tooltip-line-height: 20px;
    --fbx-tooltip-radius: var(--fbx-border-radius);
    --fbx-tooltip-pad-y: 2px;
    --fbx-tooltip-pad-x: 8px;
    --fbx-tooltop-target-space: 5px;
    --fbx-tooltop-target-space-neg: -5px;
    position: relative;
    overflow: visible !important;
}

Tooltip

Markup

Direction

CSS Customization