Tool Tip- Oracle VBCS

Project: Design the Tool Tips as effectively!!

As we know that for every web pages & apps tool tip pointer helps the user to use the applications with more confidently without as meshing up things.

Let's design such Tool Tip in VBCS 😁

Follow the below steps to achieve the tool tips.

1. Choose the web pages in VBCS

I chose the web pages by removing completely header & footer

2. Adding the Buttons to the pages
I prefer to add the tool tips to the buttons which we added.

3. Add Custom Css for TOol tip

Navigations: From main -->Settings-->Imports-->Css Imports

Create new Css as below

Once you created validate the CSS

Paste the below code in tooltip.css file

/* -------------------------------------------------------------------
  Light  Weight Tooltip using css-only

  @author Oracle ACE

  <div class="tooltip" data-tool-tip="I am testing">TEST</div>
  <div class="tooltip" data-tool-tip-left="I am testing tooltip">TEST</div>
--------------------------------------------------------------------*/
[data-tool-tip-left]{--background-color:#4b4849;position:relative;display:inline-block;box-sizing:content-box}[data-tool-tip-left]:hover:after,[data-tool-tip-left]:hover:before{visibility:visible}[data-tool-tip-left]:after{position:absolute;content:"";border:10px solid transparent;border-left:10px solid var(--background-color);margin-bottom:10px;right:100%;transform:translateX(100%);visibility:hidden;z-index:9999}[data-tool-tip-left]:before{position:absolute;height:22px;padding:10px;padding-inline:15px;font-size:20px;content:attr(data-tool-tip-left);white-space:nowrap;background-color:var(--background-color);color:white;border-radius:8px;bottom:100%;margin-bottom:-30px;transform:translateX(-99%);visibility:hidden;z-index:9999}[data-tool-tip]{--background-color:#4b4849;position:relative;display:inline-block;box-sizing:content-box;z-index:9999}[data-tool-tip]:hover:after,[data-tool-tip]:hover:before{visibility:visible}[data-tool-tip]:before{position:absolute;content:"";border:10px solid transparent;border-bottom:10px solid var(--background-color);bottom:-100%;margin-bottom:10px;left:50%;transform:translateX(-50%);visibility:hidden;z-index:9999}[data-tool-tip]:after{position:absolute;height:22px;padding:10px;padding-inline:15px;font-size:20px;content:attr(data-tool-tip);white-space:nowrap;background-color:var(--background-color);color:white;border-radius:8px;bottom:-100%;margin-bottom:-30px;left:50%;transform:translateX(-50%);visibility:hidden;z-index:9999}

4. Cosmetic change to button codes

Apply small to Button codes

Tool Tip appears:

5. Sometimes coloring also essential

For colorful Tool Tip use the below code snippet

    <oj-button style ="--background-color:red"  data-tool-tip-left="BYE♥"label="DOWN"></oj-button>

Result:

Conclusion:

we finally completed by cool project applying CSS and design the tool Tips.