Tool Tip Text on Annex's object (from old forum)

All that relates to Javascript, CSS, HTML, ....
Post Reply
MarioL
Posts: 21
Joined: Sun Mar 21, 2021 8:38 am
Has thanked: 252 times
Been thanked: 33 times

Tool Tip Text on Annex's object (from old forum)

Post by MarioL »

Hi,
In many occasions, I see useful to use the "Tool Tip Text",
I successfull to find the following code, but I think it is further optimizable for use inside ANNEX.

In molte occasioni trovo utile ricorrere al cosiddetto "Tool Tip Text",
sono riuscito a trovare il codice seguente, ma credo che sia ulteriormente ottimizzabile per l'uso in ANNEX.

Code: [Local Link Removed for Guests]

'TOOL TIP TEXT ON OBJECT
b$ ="---"
cls
A$ = ||         ' look at https://www.w3schools.com/css/css_tooltip.asp
A$ = A$ + |<style>|
A$ = A$ + |.tooltip {|
A$ = A$ + |  position: relative;|
A$ = A$ + |  display: inline-block;|

A$ = A$ + |}|
A$ = A$ + |.tooltip .tooltiptext {|
A$ = A$ + |  visibility: hidden;|
A$ = A$ + |  width: 120px;|
A$ = A$ + |  background-color: black;|
A$ = A$ + |  color: #fff;|
A$ = A$ + |  text-align: center;|
A$ = A$ + |  border-radius: 6px;|
A$ = A$ + |  padding: 5px 0;|
A$ = A$ + |  position: absolute;|
A$ = A$ + |  z-index: 1;|
A$ = A$ + |  bottom: 150%;|
A$ = A$ + |  left: 50%;|
A$ = A$ + |  margin-left: -60px;|
A$ = A$ + |}|
A$ = A$ + |.tooltip .tooltiptext::after {|
A$ = A$ + |  content: "";|
A$ = A$ + |  position: absolute;|
A$ = A$ + |  top: 100%;|
A$ = A$ + |  left: 50%;|
A$ = A$ + |  margin-left: -5px;|
A$ = A$ + |  border-width: 5px;|
A$ = A$ + |  border-style: solid;|
A$ = A$ + |  border-color: black transparent transparent transparent;|
A$ = A$ + |}|
A$ = A$ + |.tooltip:hover .tooltiptext {|
A$ = A$ + |  visibility: visible;|
A$ = A$ + |}|
A$ = A$ + |</style>|

A$ = A$ + |<div class="tooltip">|+ textbox$(b$)
A$ = A$ + |<span class="tooltiptext">Tooltip text on textbox</span></div>|

A$ = A$ + |<div class="tooltip">|+ button$("PIPPO",lblTranslate, "IDbtn")
A$ = A$ + |<span class="tooltiptext">Clic for translate</span></div>|
html a$
wait


lblTranslate:
b$ =" GOOFY  is..." : refresh
return

cicciocb:
The css can become easily complicate and very hard to understand.
A "fast and dirty" solution is to use the attribute "title" that enable the tooltip text on the objects.
This snippet shows how it can be applied to textbox and button objects

Code: [Local Link Removed for Guests]

'CODE: tooltip-easy.bas
cls
b$="ciao"

t$ = textbox$(b$)
html replace$(t$, "<input ", "<input title='this is a textbox'")
 
t$ = button$("Press Me", gohere)
html replace$(t$, "<button ", "<button title='this is a button'")

gohere:
Post Reply