Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Tool-Tip Styling

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Tool-Tip Styling
 Login/Join
 
Platinum Member
posted
How do we style this tool-tip?

 

-SET &ECHO=ALL;
SET PAGE-NUM = NOPAGE
-SET &FIRST_CURR_MONTH = EDIT(&YYMD, '9999$$$$')  || '/'  || EDIT(&YYMD, '$$$$99$$')  || '/' || '01';

-RUN

-*Get first day of current month
-SET &FIRSTD = EDIT(&YYMD, '999999$$') || '01';
-*Get first day of rolling last 12 month
-SET &FIRSTDLM = DATECVT(DATEADD(DATECVT(&FIRSTD, 'I8YYMD', 'YYMD'), 'M', -13), 'YYMD', 'A8YYMD');
-SET &FIRST_LAST_MONTH = EDIT(&FIRSTDLM, '9999$$$$')  || '/'  || EDIT(&FIRSTDLM, '$$$$99$$')  || '/' || '01';

-RUN

-SET &TITLE_MSG = '<span style="cursor: default;" ' | 'title="Retail Cost minus Dealer Cost">Profit</span>';

DEFINE FILE CAR
PROFIT/D7          = RETAIL_COST - DEALER_COST;
T1_PROFIT/A12      = FPRINT(PROFIT, 'D7', 'A12');
T1_RETAIL_COST/A12 = FPRINT(RETAIL_COST, 'D7', 'A12');
T1_DEALER_COST/A12 = FPRINT(DEALER_COST, 'D7', 'A12');
MO_PROFIT/A255 =
   '<span style="cursor: default;" title="'
|| 'From:' || (' ' | '&FIRST_LAST_MONTH.EVAL')
|| ( ' ' | '&|#013;'
|| 'To: ' || (' ' | '&FIRST_CURR_MONTH')
|| '">') || T1_PROFIT || '</span>';
END
-RUN

TABLE FILE CAR
PRINT
MO_PROFIT AS '&TITLE_MSG'

WHERE RECORDLIMIT EQ 1
ON TABLE SET STYLE *
TYPE=DATA, COLUMN=MO_PROFIT, JUSTIFY=RIGHT, $
ENDSTYLE
END
-RUN


 

This message has been edited. Last edited by: FP Mod Chuck,


App Studio Version 8202
windows Platform
SQL Server 2008/2012
 
Posts: 183 | Location: TX | Registered: January 22, 2007Report This Post
Master
posted Hide Post

The code that you posted is incomplete because it includes html tags in it, and the browser tried to render that html.

When posting code on the forums, please click on the     in the tool bar to block out your code.



Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Platinum Member
posted Hide Post
I edited the message. That is pretty much it. Thanks.


App Studio Version 8202
windows Platform
SQL Server 2008/2012
 
Posts: 183 | Location: TX | Registered: January 22, 2007Report This Post
Master
posted Hide Post
Excellent. Thank you. That completed the missing pieces. You can use css to do something like this:
 
 SET PAGE-NUM = NOPAGE
-SET &FIRST_CURR_MONTH = EDIT(&YYMD, '9999$$$$')  || '/'  || EDIT(&YYMD, '$$$$99$$')  || '/' || '01';
-RUN

-*Get first day of current month
-SET &FIRSTD = EDIT(&YYMD, '999999$$') || '01';
-*Get first day of rolling last 12 month
-SET &FIRSTDLM = DATECVT(DATEADD(DATECVT(&FIRSTD, 'I8YYMD', 'YYMD'), 'M', -13), 'YYMD', 'A8YYMD');
-SET &FIRST_LAST_MONTH = EDIT(&FIRSTDLM, '9999$$$$')  || '/'  || EDIT(&FIRSTDLM, '$$$$99$$')  || '/' || '01';

-RUN

-* -SET &TITLE_MSG = '<span style="cursor: default;" ' | 'title="Retail Cost minus Dealer Cost">Profit</span>';
-SET &TITLE_MSG = '<div class="tooltip">Profit<span class="tooltiptext">Retail Cost minus Dealer Cost</span>';

DEFINE FILE CAR
PROFIT/D7          = RETAIL_COST - DEALER_COST;
T1_PROFIT/A12      = FPRINT(PROFIT, 'D7', 'A12');
T1_RETAIL_COST/A12 = FPRINT(RETAIL_COST, 'D7', 'A12');
T1_DEALER_COST/A12 = FPRINT(DEALER_COST, 'D7', 'A12');
MO_PROFIT/A255 = '<div class="tooltip">' || T1_PROFIT || '<span class="tooltiptext">From: &FIRST_LAST_MONTH.EVAL<br>To: &FIRST_CURR_MONTH.EVAL</span></div>';
END
-RUN

TABLE FILE CAR
PRINT
MO_PROFIT AS '&TITLE_MSG'
WHERE RECORDLIMIT EQ 1
ON TABLE SET STYLE *
TYPE=DATA, COLUMN=MO_PROFIT, JUSTIFY=RIGHT, $
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN NOEVAL
<style>
    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 150px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;

    /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        top: -15px;
        left: calc(100% + 10px); 

    /* Fade in tooltip */
        opacity: 0;
        transition: opacity 0.3s;
    }

    /* Tooltip arrow */
    .tooltip .tooltiptext::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%; /* To the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #555 transparent transparent;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
</style>
-HTMLFORM END


Read more about this here: https://www.w3schools.com/css/css_tooltip.asp

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Master
posted Hide Post
I edited the code above. I missed the &TITLE_MSG


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Silver Member
posted Hide Post
You cannot style using "title" you will have to use "data-title". I found this code while searching the internet (google) and stackoverflow.com had this solution.

You will also ahve to use CSS styling:
 

-* File: IBFS:/DEV-WebFocusAT/WFC/Repository/Test/Marita/Procedure2.fex Created by WebFOCUS AppStudio
-SET &ECHO=ALL;
SET PAGE-NUM = NOPAGE
-SET &FIRST_CURR_MONTH = EDIT(&YYMD, '9999$$$$')  || '/'  || EDIT(&YYMD, '$$$$99$$')  || '/' || '01';

-RUN

-*Get first day of current month
-SET &FIRSTD = EDIT(&YYMD, '999999$$') || '01';
-*Get first day of rolling last 12 month
-SET &FIRSTDLM = DATECVT(DATEADD(DATECVT(&FIRSTD, 'I8YYMD', 'YYMD'), 'M', -13), 'YYMD', 'A8YYMD');
-SET &FIRST_LAST_MONTH = EDIT(&FIRSTDLM, '9999$$$$')  || '/'  || EDIT(&FIRSTDLM, '$$$$99$$')  || '/' || '01';

-RUN

-SET &TITLE_MSG = '<span style="cursor: default;" ' | 'title="Retail Cost minus Dealer Cost">Profit</span>';

DEFINE FILE CAR
PROFIT/D7          = RETAIL_COST - DEALER_COST;
T1_PROFIT/A12      = FPRINT(PROFIT, 'D7', 'A12');
T1_RETAIL_COST/A12 = FPRINT(RETAIL_COST, 'D7', 'A12');
T1_DEALER_COST/A12 = FPRINT(DEALER_COST, 'D7', 'A12');
MO_PROFIT/A255 =
   '<span style="cursor: default;color=red;"  data-title="'
|| 'From:' || (' ' | '&FIRST_LAST_MONTH.EVAL')
|| ( ' ' | '&|#013;'
|| 'To: ' || (' ' | '&FIRST_CURR_MONTH')
|| '">') || T1_PROFIT || '</span>';
END
-RUN

TABLE FILE CAR
PRINT
MO_PROFIT AS '&TITLE_MSG'

WHERE RECORDLIMIT EQ 1
ON TABLE SET STYLE *
TYPE=DATA, COLUMN=MO_PROFIT, JUSTIFY=RIGHT, $
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<style>

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}
</style>

-HTMLFORM END

 


WebFOCUS 8.2.02M
Windows
Server/8.2.02M
All Outputs
 
Posts: 43 | Location: Odessa, Florida | Registered: July 26, 2011Report This Post
Master
posted Hide Post
There is always the option of integrating Bootstrap 4 into your report output as well and user their tooltip set up (Read more here: https://getbootstrap.com/docs/...components/tooltips/

This code uses the bootstrap tooltips which uses the title attribute of the element:
  
SET PAGE-NUM = NOPAGE
-SET &FIRST_CURR_MONTH = EDIT(&YYMD, '9999$$$$')  || '/'  || EDIT(&YYMD, '$$$$99$$')  || '/' || '01';
-RUN

-*Get first day of current month
-SET &FIRSTD = EDIT(&YYMD, '999999$$') || '01';
-*Get first day of rolling last 12 month
-SET &FIRSTDLM = DATECVT(DATEADD(DATECVT(&FIRSTD, 'I8YYMD', 'YYMD'), 'M', -13), 'YYMD', 'A8YYMD');
-SET &FIRST_LAST_MONTH = EDIT(&FIRSTDLM, '9999$$$$')  || '/'  || EDIT(&FIRSTDLM, '$$$$99$$')  || '/' || '01';

-RUN

-SET &TITLE_MSG = '<span data-toggle="tooltip" data-placement="top" data-container="body" title="Retail Cost minus Dealer Cost">Profit</span>';

DEFINE FILE CAR
PROFIT/D7          = RETAIL_COST - DEALER_COST;
T1_PROFIT/A12      = FPRINT(PROFIT, 'D7', 'A12');
T1_RETAIL_COST/A12 = FPRINT(RETAIL_COST, 'D7', 'A12');
T1_DEALER_COST/A12 = FPRINT(DEALER_COST, 'D7', 'A12');
MO_PROFIT/A255 = '<span data-toggle="tooltip" data-placement="right" data-container="body" data-html="true" title="From: &FIRST_LAST_MONTH.EVAL<br>To: &FIRST_CURR_MONTH.EVAL">' || T1_PROFIT || '</span>';
END
-RUN

TABLE FILE CAR
PRINT
MO_PROFIT AS '&TITLE_MSG'
WHERE RECORDLIMIT EQ 1
ON TABLE SET STYLE *
TYPE=DATA, COLUMN=MO_PROFIT, JUSTIFY=RIGHT, $
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN NOEVAL
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>
<head>
-HTMLFORM END


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Platinum Member
posted Hide Post
These suggestions work.Thank you.


App Studio Version 8202
windows Platform
SQL Server 2008/2012
 
Posts: 183 | Location: TX | Registered: January 22, 2007Report This Post
Master
posted Hide Post
Excellent!!

🎉

Don't forget to change the title of the post to start with [SOLVED]

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Tool-Tip Styling

Copyright © 1996-2020 Information Builders