It's a simple 2 step process:

Step 1: Create new style name

New Styles are defined in Custom.xml in "/DesktopModules/LiveTooltip/Styles/" folder.

If this is your first custom style then begin by creating the new Custom.xml with your favorite text editor (such as Notepad or Dreamweaver)

Add the following to your Custom.xml file.

<?xml version="1.0" encoding="utf-16"?>
<ArrayOfLiveTooltipStyle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <LiveTooltipStyle>
    <Name>MyStyle</Name>
    <Classes>ui-tooltip-mystyle</Classes>
  </LiveTooltipStyle>
</ArrayOfLiveTooltipStyle>

That's it! We've added our first Style (named MyStyle) to the LiveTooltip module.  To add additional styles, simply create another instance of <LiveTooltipStyle> tag. To create a style we must define two parameters:

Name: Defines the name of the style
Classes: Defines the CSS classes of the style. We can specify multiple classes by separating them with a space such as ui-tooltip-mystyle ui-tooltip-shadow Example: Let's create another style named "Vista Style". Our custom.xml will now look like:

<?xml version="1.0" encoding="utf-16"?>
<ArrayOfLiveTooltipStyle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <LiveTooltipStyle>
    <Name>MyStyle</Name>
    <Classes>ui-tooltip-mystyle</Classes>
  </LiveTooltipStyle>
</ArrayOfLiveTooltipStyle>

After you define the styles in custom.xml, they will automatically appear in Settings > Style dropdown.

Step 2: Define CSS Classes

If this is your first custom style then begin by creating the Custom.css with your favorite text editor (such as Notepad or Dreamweaver)

Now your Styles folder will have following files

Simply edit the custom.css to define your css files.

Example:

div.ui-tooltip-mystyle .ui-tooltip-wrapper{
  border:#003366 solid 2px;
  background-image:url(images/bg.png);
  color:#FFFFFF;
  -moz-border-radius:0px 9px 9px 9px;
}