Xin Calendar 2 Mods: Date Tips

The Date Tips mod enables tooltips for dates.

Like the Tiles mod, the Date Tips mod only works with In-Page version:

xcMods=[...
        {"order": 1,  "mod": "Date Tips",  "script": "mod_tips.js"}];

or:

<script language="javascript" src="../config/xc2_default.js"></script>
<script language="javascript">
  xcMods[8].order=1;
</script>

then we have some settings for the tooltips:

<script language="javascript" src="../script/xc2_inpage.js"></script>
<script language="javascript">
... define tooltips for dates ...
</script>
</head>

The default config file (config/xc2_default.js) comes with some layout settings for the Date Tips mod:

xcDateTipTiming=1000;
xcDateTipBoxTitleSwitch=1;
xcDateTipBoxPosition=6;
xcDateTipBoxAlign=1;
xcDateTipBoxValign=0;
xcDateTipBoxOffsetX=0;
xcDateTipBoxOffsetY=6;
xcCSSDateTipBoxTitle="tip_title";
xcCSSDateTipBox="tip_box";

in which the [ xcDateTipTiming ] is the interval in ms from mouse-overing a date to poping up the tooltip for the date, the [ xcDateTipBoxTitleSwitch ] tells whether to show the date as title for the tooltip (1:show title, 0:not show), the [ xcDateTipBoxPosition ] tells to which side of the date cell hovered to pop up the tooltip (0: top, 3: right, 6: bottom, 9: left), the [ xcDateTipBoxAlign ] tells the horizontal alignment of the tooltip against the date cell hovered when [ xcDateTipBoxPosition ] is set to 0 or 6, the [ xcDateTipBoxValign ] tells the vertical alignment when [ xcDateTipBoxPosition ] is set to 3 or 9, the [ xcDateTipBoxOffsetX ] and [ xcDateTipBoxOffsetY ] are the offset of tooltip away from position, and [ xcCSSDateTipBoxTitle] and [ xcCSSDateTipBox ] are the names of CSS classes for the tooltips.

The CSS definition of "tip_title" and "tip_box" could be found in the default CSS file (css/xc2_default):

.tip_title {
  font-family:verdana;
  font-size:11px;
  text-align:center;
  color:#ffffff;
  background-color:#cc9999;
  border-width:1px;
  border-style:solid;
  border-color:#996666 #ffcccc #ffcccc #996666;
  padding:0px 3px;
}
.tip_box {
  filter:
    alpha(opacity:90)
    progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5);
  -moz-opacity:0.9;
  width:200px; height:100px;
  font-family:verdana;
  font-size:11px;
  text-align:left;
  color:#000000;
  background-color:#cfcfcf;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:3px;
  cursor:default;
  overflow:auto;
}

To define the tooltips for dates, we have:

addDateTips(conf_name, css, css_disabled, css_title, css_box, dateFormat, date, tip)
1. conf_name ... a name for the configuration reference
2. css ... css class for dates with tooltip defined, if empty, use the one defined in the [ xcCSSDaySpecial ] array
3. css_disabled ... css class for dates with tooltip defined that are disabled, if empty, use the one defined in the [ xcCSSDaySpecial ] array
4. css_title ... css class for the title of the tooltip, if empty, use the one defined by [ xcCSSDateTipBoxTitle ]
5. css_box ... css class for the content of the tooltip, if empty, use the one defined by [ xcCSSDateTipBox ]
6. date_format ... date format used for following date parameter, if empty, use the one defined by [ xcDateFormat ]
7. date ... date string
8. tip ... tip content in HTML format
```
addDateTips("conf", "", "", "", "", "", "2004-07-28",
  "Celebration of Light - China<br><br>Location: English Bay, Vancouver<br>Web site: ...");
```

[Putting mods together] [Back to index page]

# # #