Inbuilt Color Schemes

Elixon Tooltip by default supports following color schemes: dark, yellow, blue, sand, green, red, box

You can select the color scheme by passing the name of the scheme to look parameter when calling the Elixon Tooltip: $('#myElement').et({look: "blue"});

You can optionally set the color scheme as default for all tooltips: $.fn.et('defaults', {look: "blue"});

Custom Color Schemes

If you want to create color variants only then use this CSS template for a start. Replace the LookName, BgColor, BorderColor, TextColor strings with your own values.

.et.LookName { opacity: 0.9; background-color: BgColor; border-color: BorderColor; color: TextColor; }
.et.LookName a {color: TextColor;}
.et.LookName:before { border-color: BorderColor transparent; }
.et.LookName:after {border-color: BgColor transparent; }
.et.LookName.etLeft:before, .et.LookName.etRight:before { border-color: transparent BorderColor; }
.et.LookName.etLeft:after, .et.LookName.etRight:after {border-color: transparent BgColor; }

Variable meanings

• LookName - CSS class name that will be added to the outer bubble's div element.
• BgColor - Background color of the tooltip.
• BorderColor - Border color of the tooltip.
• TextColor - Foreground text of the tooltip.

Then you can call the Elixon Tooltip and pass the LookName name as the look parameter.

$('#myElement').et({look: "LookName"});

Or you can set the default color scheme as default before calling any tooltip.

$.fn.et('defaults', {look: "LookName"});

Full Example

<link type="text/css" rel="stylesheet" href="./jquery.tooltip.css" />
<script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./jquery.tooltip.min.js"></script>
<style type="text/css">
  .et.myLook { opacity: 0.9; background-color: #FFFF6B; border-color: #959500; color: black; }
  .et.myLook a {color: blue;}
  .et.myLook:before { border-color: #959500 transparent; }
  .et.myLook:after {border-color: #FFFF6B transparent; }
  .et.myLook.etLeft:before, .et.myLook.etRight:before { border-color: transparent #959500; }
  .et.myLook.etLeft:after, .et.myLook.etRight:after {border-color: transparent #FFFF6B; }
</style>
<script type="text/javascript">
  $.fn.et('defaults', {look: "myLook"}); // Set it as default
  $('#something').et(); // Normal Elixon Tooltip usage
</script>

More

If you are a skilled CSS designer then for sure you know how to explore even more possibilities. ;-)