Learn how to connect an HTML form to the database and email! It takes only 3 minutes. Read more

javascript by
Free Download

Elixon Tooltip 2

Buy Now! 1 $
  • Home
  • Gallery
  • Overview
  • API
  • Appearance
  • Examples
  • Contents
  • Questions
  • Inbuilt Color Schemes
  • Custom Color Schemes
  • Full Example
  • More
  • 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; }
    <script type="text/javascript">
      $.fn.et('defaults', {look: "myLook"}); // Set it as default
      $('#something').et(); // Normal Elixon Tooltip usage


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