Menu icon Foundation
Tooltip style not seen on 5.3

<span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-bottom round" title="Tooltips are awesome, you should totally use them! (bottom round no-touch)">Hover on desktop!</span>
</div>
            

// $tooltip-padding: rem-calc(12);
$tooltip-bg: red;
// $tooltip-font-size: rem-calc(14);
// $tooltip-font-weight: normal;
// $tooltip-font-color: #fff;
// $tooltip-line-height: 1.3;
// $tooltip-close-font-size: rem-calc(10);
// $tooltip-close-font-weight: normal;
// $tooltip-close-font-color: #777;
// $tooltip-font-size-sml: rem-calc(14);
// $tooltip-radius: $global-radius;
// $tooltip-pip-size: 5px;         

<span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-bottom round" title="Tooltips are awesome, you should totally use them! (bottom round no-touch)">Hover on desktop!</span>
</div>
            

// $tooltip-padding: rem-calc(12);
$tooltip-bg: red;
// $tooltip-font-size: rem-calc(14);
// $tooltip-font-weight: normal;
// $tooltip-font-color: #fff;
// $tooltip-line-height: 1.3;
// $tooltip-close-font-size: rem-calc(10);
// $tooltip-close-font-weight: normal;
// $tooltip-close-font-color: #777;
// $tooltip-font-size-sml: rem-calc(14);
// $tooltip-radius: $global-radius;
// $tooltip-pip-size: 5px;         

The tooltip doesn't seem to pay attention to the styling classes. Even if changed in the defaults. I only get a yellow box on the bottom.

The tooltip doesn't seem to pay attention to the styling classes. Even if changed in the defaults. I only get a yellow box on the bottom.

tooltip

<span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-bottom round" title="Tooltips are awesome, you should totally use them! (bottom round no-touch)">Hover on desktop!</span>
</div>
            

// $tooltip-padding: rem-calc(12);
$tooltip-bg: red;
// $tooltip-font-size: rem-calc(14);
// $tooltip-font-weight: normal;
// $tooltip-font-color: #fff;
// $tooltip-line-height: 1.3;
// $tooltip-close-font-size: rem-calc(10);
// $tooltip-close-font-weight: normal;
// $tooltip-close-font-color: #777;
// $tooltip-font-size-sml: rem-calc(14);
// $tooltip-radius: $global-radius;
// $tooltip-pip-size: 5px;         

<span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-bottom round" title="Tooltips are awesome, you should totally use them! (bottom round no-touch)">Hover on desktop!</span>
</div>
            

// $tooltip-padding: rem-calc(12);
$tooltip-bg: red;
// $tooltip-font-size: rem-calc(14);
// $tooltip-font-weight: normal;
// $tooltip-font-color: #fff;
// $tooltip-line-height: 1.3;
// $tooltip-close-font-size: rem-calc(10);
// $tooltip-close-font-weight: normal;
// $tooltip-close-font-color: #777;
// $tooltip-font-size-sml: rem-calc(14);
// $tooltip-radius: $global-radius;
// $tooltip-pip-size: 5px;         

The tooltip doesn't seem to pay attention to the styling classes. Even if changed in the defaults. I only get a yellow box on the bottom.

The tooltip doesn't seem to pay attention to the styling classes. Even if changed in the defaults. I only get a yellow box on the bottom.

This post has been closed. No new replies can be added.

Paul Lazaga about 5 years ago

Ok, nevermind. It appears to be a conflict with the pivotallabs/style-guide which identifies classes via some sort of parse method.