How to make a BalloonHint ?

[irigsoft]

6 hours ago, Luciano França said:

And how could I change the CSS so that the Hint looks like a BallonHint I tried but I couldn't even change the font size

I want with rounded corners and an Arrow to have the shape of a BallonHint

 

 

.hintClass {

  color: white;

  font-size: 34px; // Does not work

}

 

.hintClass2 {

  background: dimgray;

  color: white;

 

 // Does not work

  visibility: hidden;

  width: 120px;

  background-color: black;

  color: #fff;

  text-align: center;

  padding: 5px 0;

  border-radius: 6px;

}

 

 

 

 

 

 

 

Hello, try to add your settings into .hintClass, and remove visibility: hidden;

[irigsoft]

@Sherzod, I need Your advice again.

I use this settings:

.hintClass {
/*    color: #93612b;*/
    color: #fff;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    background: red;
    background-color: dimgray; 
    border: 0px;
    text-align: center;
/*    padding: 20px 0; */
/*    border-radius: 6px 6px 6px 6px; */
}

.hintClass2 {
    background: green; 
    border: none;
    font-size: 10px;
    font-family: "Lucida Console", "Courier New", monospace;
    padding: 5px 0; 
    border-radius: 20px; 
}

 

and I get this result 

now I need to hide border from image, how can I do that ?

[irigsoft]

If I add 

.hintClass2 {
    background: green; 
    border: none;
    font-size: 10px;
    font-family: "Lucida Console", "Courier New", monospace;
    padding: 5px 0; 
    border-radius: 20px; 
    visibility: hidden;
}

then I get this as result: 

 

, how to hide this region ?

[irigsoft]

I have found solution, here is result: 

 

code is based on this: https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

 

.hintClass {
/*    color: #93612b;*/
    color: #fff;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
/*    background: red;*/
/*    background-color: dimgray; */
    border: 0px;
    text-align: center;
/*    padding: 5px; */
/*    border-radius: 20px; */
    position: relative;
    display: inline-block;
    border-top: 5px dotted green; /* If you want dots under the hoverable text */
}

.hintClass2 {
    background: green; 
    border: none;
    font-size: 10px;
    font-family: "Lucida Console", "Courier New", monospace;
/*    padding: 5px 0;  */
    border-radius: 20px;     
    position: relative;
    border-bottom: 5px dotted black; /* If you want dots under the hoverable text */

  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  top:50%;
  transform:translateY(-20%);
  
  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */
  
  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;
}
 

[Sherzod]

Good.

[Luciano França]

3 hours ago, irigsoft said:

I have found solution, here is result: 

 

code is based on this: https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

 

.hintClass {
/*    color: #93612b;*/
    color: #fff;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
/*    background: red;*/
/*    background-color: dimgray; */
    border: 0px;
    text-align: center;
/*    padding: 5px; */
/*    border-radius: 20px; */
    position: relative;
    display: inline-block;
    border-top: 5px dotted green; /* If you want dots under the hoverable text */
}

.hintClass2 {
    background: green; 
    border: none;
    font-size: 10px;
    font-family: "Lucida Console", "Courier New", monospace;
/*    padding: 5px 0;  */
    border-radius: 20px;     
    position: relative;
    border-bottom: 5px dotted black; /* If you want dots under the hoverable text */

  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  top:50%;
  transform:translateY(-20%);
  
  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */
  
  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;
}
 

How could I put an arrow ?

[irigsoft]

1 minute ago, Luciano França said:

How could I put an arrow ?

did You see this code : https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

maybe @Sherzod can help here.

[Luciano França]

32 minutes ago, irigsoft said:

did You see this code : https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

maybe @Sherzod can help here.

I can't use the code on this site.
😂😂😂

[Luciano França]

On 3/8/2023 at 4:56 PM, irigsoft said:

Hello,

1. try to replace code into CustomCSS.js with this new one:

Ext.override(Ext.Component,{
	onRender: function() {
	   if (this.hasCustomHint) {
		var el = this;
        this.on ('mouseover', function () {
			var _title;
			_title = el.getEl().getAttribute('title') || el.getEl().dom.getAttribute('title');
        	if (!el._toolTip && _title!=null) {
				el.getEl().dom.removeAttribute('title');
				el._toolTip = Ext.create('Ext.tip.ToolTip', {
					target: el,
					html: '<span class="hintClass">' + _title + '</span>',
					trackMouse: true,
					userCls: 'hintClass2'
				});
				el._toolTip.show()
			}
		})
           }
	   this.callParent();
	}
});

2. Clear Browser cash for You servers IP

3. Start Application and new style will be appear over button, Edit, Label, Memo

 

Error in TUniDateTimePicker

An Exception has occured in application:

There is no Default JavaScript Object. [UniDateTimePicker1 : TUniDateTimePicker]

Restart application

 

>did You see this code : https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

 @Sherzod  help us

[irigsoft]

41 minutes ago, Luciano França said:

Error in TUniDateTimePicker

An Exception has occured in application:

There is no Default JavaScript Object. [UniDateTimePicker1 : TUniDateTimePicker]

Restart application

 

>did You see this code : https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

 @Sherzod  help us

Yes, I posted the same link at the beginning of this thread.

Currently for my system I used from the code above and that is quite enough for me for now.
The only thing left is how to do it with ActionButtons in the grid, but I'm waiting @Sherzod 

 

You can use code from link to make more beautiful you css settings.

[Sherzod]

On 3/14/2023 at 3:59 PM, irigsoft said:

The only thing left is how to do it with ActionButtons in the grid, but I'm waiting @Sherzod 

Hello @irigsoft

Sorry I haven't found a way to do this yet.

[irigsoft]

22 minutes ago, Sherzod said:

Hello @irigsoft

Sorry I haven't found a way to do this yet.

OK, thanks.

If you found a way please share it.

[Luciano França]

On 3/14/2023 at 7:18 AM, Luciano França said:

Error in TUniDateTimePicker

An Exception has occured in application:

There is no Default JavaScript Object. [UniDateTimePicker1 : TUniDateTimePicker]

Restart application

 

>did You see this code : https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

 @Sherzod  help us

Up.

[Luciano França]

On 3/14/2023 at 7:18 AM, Luciano França said:

Error in TUniDateTimePicker

An Exception has occured in application:

There is no Default JavaScript Object. [UniDateTimePicker1 : TUniDateTimePicker]

Restart application

 

>did You see this code : https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/

 @Sherzod  help us

Up.