Hi, esteemed users of WordPress Tooltip , I hope this message finds you are doing well well and enjoying wonderful days with your family Yesterday, we replied to a question submitted by a new wordpress tooltip user: How to set up tooltip position in wordpress tooltips plugin? Today we got a question from another new user of wordpress tooltip plugin, he said:
The custom style is not loading, and I am unable to get it to load. How can I select a custom style for the tooltip?
10 years ago, we added a tooltip style settings panel to the wordpress tooltip plugin in order to make it easy for wordpress tooltip editors to quickly customize beautiful tooltips. The tooltip custom style panel looks like this:

And An early version from 10 years ago looked like this:

As you can see from the comparison of the two screenshots, over the past 10 years we’ve added a lot of options for wordpress tooltip users to customize a beautiful and unique wordpress tooltip.
With the ability to apply custom styles to tooltips, users can make their tooltips stand out from default or standard tooltip styles. This can be particularly useful when users want to draw attention to specific information or make important tooltips more noticeable.
The WordPress tooltip plugin allows users to customize the style of tooltips to match their website’s design, branding, or aesthetic preferences. Customizing the style of tooltips offers several benefits:
- Consistency: By customizing the style of tooltips, users can ensure that the tooltips align with the overall look and feel of their website. This helps maintain a consistent visual experience for visitors.
- Branding: Customizing the style of tooltips allows users to incorporate their brand elements, such as colors, fonts, or logos, into the tooltips. This helps reinforce brand identity and create a cohesive online presence.
- Visual Appeal: Styling tooltips can enhance the visual appeal of the website. Users can choose fonts, colors, and other design elements that make the tooltips more attractive and engaging, consequently improving the overall user experience.
- Differentiation: With the ability to apply custom styles to tooltips, users can make their tooltips stand out from default or standard tooltip styles. This can be particularly useful when users want to draw attention to specific information or make important tooltips more noticeable. Overall, providing the option to customize the style of tooltips adds flexibility and allows users to create visually appealing and cohesive experiences on their websites.
You can find our wordpress tooltip video tutorial at: WordPress Tooltips Video Tutorial 6: custom tooltip box color, font, underline, Shadow… and more
Discover how to personalize your tooltip style with WordPress Tooltips Pro Plus. Experience the power of customization with a variety of configuration options that allow you to effortlessly control the appearance of your tooltips. Follow these simple steps to give your tooltips a unique and captivating look:
- Login to your WordPress admin area and navigate to the Tooltips menu in wordpress dashboard, and then click Tooltips Style sub-menu item.
- You will open the “Tooltips Style Settings” panel, in here you’ll find more than 50 options to customize the pretty style of your tooltips with ease. Personalize Your Tooltip Style with WordPress Tooltips Pro, for example:
- Tooltip Box Width (required field): Tailor the width of your tooltip by specifying a value such as “400” (which represents 400 pixels).
- WordPress Tooltip Box Background (required field): Effortlessly change the background color of your tooltip using the intuitive color picker.
- WordPress Tooltip Font Color (required field): Select a precise font color for your tooltip by utilizing the convenient color picker.
- WordPress Tooltip Box Position (required field): Enjoy the flexibility of choosing from eight different tooltip positions, including bottomRight, bottomLeft, topRight, topLeft, topMiddle, bottomMiddle, rightMiddle, and leftMiddle.
- WordPress Tooltip Text Align (required field): Align the text in your tooltip using one of three options: left, right, or center.
- WordPress Tooltip Box Padding (required field): Specify the padding property for your tooltip popup box by indicating a value, like “10” (equivalent to 10 pixels).
- WordPress Tooltip Class Name (required field): Define a class name for your tooltip, further customizing its appearance.
- WordPress Tooltip Border Radius (required field): Apply rounded corners to your tooltip popup box by setting the Tooltip Border Radius property. For instance, “5” represents 5 pixels.
- WordPress Tooltip Border Width (required field): Determine the width of your tooltip’s border with the Border Width property. For example, “3” signifies a 3-pixel border.
- WordPress Tooltip Border Color (required field): Seamlessly select a border color for your tooltip using the color picker.
- WordPress Tooltip Shows When (required field): Explore nine trigger methods for displaying your tooltips, including Mouse Over, Mouse Leave, Mouse Enter, Mouse Out, Mouse Move, Mouse Up, Mouse Down, Double Click, and Click.
- WordPress Tooltip Hides When (required field): Discover ten different ways to hide your tooltip popup box, including Mouse Over, Mouse Leave, Mouse Enter, Mouse Out, Mouse Move, Mouse Up, Mouse Down, Double Click, Click, and Stay Open A While.
- WordPress Tooltip Opacity (required field): Create transparent tooltips by adjusting the opacity property. Choose a value ranging from 0.1 to 1.0, with lower values providing increased transparency.
- WordPress Tooltip Border Bottom (required field): Select from five options (Dotted, Double Line, Solid, Dashed, Hidden) to style the bottom border of your tooltip keywords.
- WordPress Tooltips Underline Color (required field): Use the color picker to select an underline color for your WordPress tooltip keywords.
- WordPress Tooltips Shadow (required field): Opt to display or hide a shadow effect for your tooltips.
- WordPress Tooltip Font Size (required field): Set the font size for your tooltips, for example, “12” represents 12 pixels.
- WordPress Tooltip Line Height (required field): Customize the line height of your tooltips with ease. For instance, “1.5” adjusts the line spacing accordingly. Unleash your creativity and give your tooltips a warm, personalized touch with WordPress Tooltips Pro. Experience the joy of effortlessly creating visually striking tooltips that perfectly complement your website.
…etc, and we are adding more than more optons based on wordpress tooltip users’ feature requests 🙂
Please note:
1: Typically, wordpress tooltip users can quickly customize a tooltip style to fit their website with just a few mouse clicks, for example, wordpress tooltip users can choose the colors intutively from wordpress tooltip color picker, include tooltips box background color, tooltips font color, tooltips border color…etc.
2: In general, if wordpress tooltip users changed style fields value in custom tooltip settings panel, wordpress tooltip plugin will setting tooltip style as customized style automatically, so wordpress tooltip users do not need to click twice in “tooltip box style option”
3: In wordpress tooltip style settings panel, we added html required attribute for required options, if wordpress tooltip user forget to enter the values in tooltip style input box, we will give a notice, by this way, wordpress tooltip users will not need to submite form again and again.
4: In wordpress tooltip style settings panel, we added placeholder as example of each tooltip option, for help tooltip user understand it easier
5: In wordpress tooltip style settings panel, we added tips for each tooltip option, when tooltip user mouse hover the tip of the tooltip option, a window will popuo with the detailed description of the function of the tooltip option
6: Common reasons why settings don’t work for new users are — the user forget to click the blue “Save changes” button at the bottom of the tooltip style settings panel
The following shows some examples of tooltip terms with customized tooltip styles
Conclution:
Tooltips are small popup box with more information like video / audio / image / google maps / QR code / wiki / text… and so, tooltips box will pop up when users hover over an element in your pages, the element can be a word in your post, a search form input box, an image in your page, a widget on your sidebar.. and so on, wordpress tooltip plugin supports add tooltip effect on any element on the wordpress posts, or display on wordperss menu, comment, contact form, woocmmerce product, bbpress forum, buddypress activity…etc, with pretty effects and many more little amazing components and addons, for example, Bullets Screen
What it WordPress Tooltip Plugin:
WordPress tooltip pro is a tooltips plugin for wordpress, which be designed to help you create colorful, varied and graceful tooltip styles to present the content to your users, with lively and elegant animation effects, and save your valuable screen space.
When the users hover over an item, the colorful tooltip popup box will display with the animation effect. You can add video, audio, image, and even other content which generated by 3rd wordpress plugins like QR code, Amazon AD, Google Map in tooltip popup box via wordpress standard editor, it is very easy to use.
Hope this have a little help 🙂