COLOURcode

Tooltips and Popovers - triggered content to add some sparkle to your app

Summary of features

COLOURcode supports all of the standard Bootstrap tooltip and popover options, methods and events, plus it adds some attractive new styles and features. Static tooltips and popovers can easily be coloured by the addition of a single classname on the target element (e.g. .tooltip-blue or .tooltip-info), and with the addition of a little extra markup in the data-content attribute as shown below, your popovers can take on modal-like functionality with a carefully styled footer and link button.

At a glance

  • Add contextual and/or associational colouring to your tooltips.
  • Style all components of a static popover with a single colour class.
  • Choose from up to ten named and two branding colour-sets.
  • Add a footer and link button to popovers with simple markup.
  • No extra Javascript required for any of the above, just Bootstrap.

Default static tooltips

   unstyled

These anchors have no extra classnames:
Right  -  Top  -  Bottom  -  Left.

COLOURcode static tooltips

   examples
   examples
   examples

  BRAND1 Tooltips

These anchors have a class of .tooltip-brand1:
Right  -  Top  -  Bottom  -  Left.

  BRAND2 Tooltips

These anchors have a class of .tooltip-brand2:
Right  -  Top  -  Bottom  -  Left.

  BLUE Tooltips

These anchors have a class of .tooltip-blue:
Right  -  Top  -  Bottom  -  Left.

  YELLOW Tooltips

These anchors have a class of .tooltip-yellow:
Right  -  Top  -  Bottom  -  Left.

  RED Tooltips

These anchors have a class of .tooltip-red:
Right  -  Top  -  Bottom  -  Left.

  GREEN Tooltips

These anchors have a class of .tooltip-green:
Right  -  Top  -  Bottom  -  Left.

  ORANGE Tooltips

These anchors have a class of .tooltip-orange:
Right  -  Top  -  Bottom  -  Left.

  PURPLE Tooltips

These anchors have a class of .tooltip-purple:
Right  -  Top  -  Bottom  -  Left.

  GOLD Tooltips

These anchors have a class of .tooltip-gold:
Right  -  Top  -  Bottom  -  Left.

  BRONZE Tooltips

These anchors have a class of .tooltip-bronze:
Right  -  Top  -  Bottom  -  Left.

  SILVER Tooltips

These anchors have a class of .tooltip-silver:
Right  -  Top  -  Bottom  -  Left.

  GREY Tooltips

These anchors have a class of .tooltip-grey:
Right  -  Top  -  Bottom  -  Left.

Default static popovers

These anchors have no extra classnames:
Right  -  Top  -  Bottom  -  Left.

COLOURcode static popovers

markup for above: <a href="#" class="popover-gold" data-toggle="popover" data-placement="top" title="...", data-content="...", data-html="true">

Popover with link button

data-content for above: "... <div class='popover-footer'><a class='btn btn-xs btn-default' href='#'>more...</a></div>"

  BRAND1 Popovers

These anchors have a class of .popover-brand1:
Right  -  Top  -  Bottom  -  Left.

  BRAND2 Popovers

These anchors have a class of .popover-brand2:
Right  -  Top  -  Bottom  -  Left.

  BLUE Popovers

These anchors have a class of .popover-blue:
Right  -  Top  -  Bottom  -  Left.

  YELLOW Popovers

These anchors have a class of .popover-yellow:
Right  -  Top  -  Bottom  -  Left.

  RED Popovers

These anchors have a class of .popover-red:
Right  -  Top  -  Bottom  -  Left.

  GREEN Popovers

These anchors have a class of .popover-green:
Right  -  Top  -  Bottom  -  Left.

  ORANGE Popovers

These anchors have a class of .popover-orange:
Right  -  Top  -  Bottom  -  Left.

  PURPLE Popovers

These anchors have a class of .popover-purple:
Right  -  Top  -  Bottom  -  Left.

  GOLD Popovers

These anchors have a class of .popover-gold:
Right  -  Top  -  Bottom  -  Left.

  BRONZE Popovers

These anchors have a class of .popover-bronze:
Right  -  Top  -  Bottom  -  Left.

  SILVER Popovers

These anchors have a class of .popover-silver:
Right  -  Top  -  Bottom  -  Left.

  GREY Popovers

These anchors have a class of .popover-grey:
Right  -  Top  -  Bottom  -  Left.

Contextual static popovers

markup for above: <a href="#" class="popover-danger" data-toggle="popover" data-placement="top" title="...", data-content="...">

  PRIMARY Popovers

These anchors have a class of .popover-primary:
Right  -  Top  -  Bottom  -  Left.

  INFO Popovers

These anchors have a class of .popover-info:
Right  -  Top  -  Bottom  -  Left.

  SUCCESS Popovers

These anchors have a class of .popover-success:
Right  -  Top  -  Bottom  -  Left.

  WARNING Popovers

These anchors have a class of .popover-warning:
Right  -  Top  -  Bottom  -  Left.

  DANGER Popovers

These anchors have a class of .popover-danger:
Right  -  Top  -  Bottom  -  Left.