EverWeb Codebox logo

EverWeb Widgetbox 3

Tablet Phone Number Tooltip

Touch Phone  Tooltip Widget
Touch Phone Tooltip Widget


When a phone number is inserted via a text box, it appears as a nasty blue link when viewed on an iPad.
This widget overcomes the problem by placing the phone number(s) in a tooltip which appears when the button is tapped.
It can also be used on the full site where it will reveal the tooltip and its contents on hover.
Note that this is not a phone button for smart phones.

Widget Settings

The button size is not adjustable and is set at the dimensions recommended by Apple for touch devices.
Set the icon color, background color, border color and box shadow color and radius if required.
Set the tooltip maximum width, border width and color, corner radius and background color.
Enter the phone number as shown in the screenshot of the widget settings with the number groups separated by a hyphen.
Set the tooltip font, size and color.
Adjust the value for padding as required.
Line breaks are created using the HTML <br>
Where two or more lines are used, use the value for line height to adjust the spacing between them.

This widget is included in the Touch widget pack.

Touch Phone Button

Touch Phone Button Widget
Touch Phone Button Widget

Smart Phone Button

This is the smart phone equivalent of the above button and will call the inserted phone number when tapped on an iPhone or similar device.
The button size is fixed at the size recommended by Apple for touch devices and has options for styling the icon, background, border and box shadow colors and setting the shadow radius.
The phone number is entered as before with a hyphen separating the number groups.

This widget is included in the Touch widget pack.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …