Control Description
Tooltips on websites are small things which can play a big role in website design. If a tooltip on your website is very well made and looks amazing then it can lift up visitors impression about your website. And that’s why we have developed scaTooltip. And remember that all those small website design things make your website look better.
Compatibility
Web
Using the control
Just drag and drop the control from the toolbox to your Master Page and Enjoy!
Properties
scaTooltip provides additional properties for customization purposes.
| Activation: |
("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover" or "focus". |
| Delay: |
(400 by default) - Number of milliseconds to delay before showing TipTip popup after you mouseover an element with TipTip applied to it. |
| maxWidth: |
("400px" by default) - css max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'. |
| Offset: |
(2 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified. |
| Position: |
("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right". |
| Source: |
(Tipsy by default) - Default implementation for Tooltip. You can select Tipsy or TipTip |
| TextColor: |
(White by default) - Text color for tooltip when using TipTip implementation |
Runtime Examples
.png)
Without using scaTooltip
Using scaTooltip (source TipTip)
Considerations
- TipTip does not work well in Internet Explorer if HTML Document Type is not defined.
- Source property can be changed at runtime, so if you want to use TipTip but don't want to set HTML Document Type, then you can use this code in the Start event of your Master Page in order to use Tipsy for Internet Explorer and tiptip for other browsers.
if BrowserId()=1 // IE
scaTooltip1.Source = "tipsy"
else
scaTooltip1.Source = "tiptip"
endif
More examples
Tipsy is used by Twitter, Github and Slideshare among others.
.png)
