Jump to content
uniGUI Discussion Forums
shawdown

Hint " Ext.tip.ToolTip "

Recommended Posts

I'm adding a hint to a TUniImage with the code below.
function afterrender(sender, eOpts)
{
    sender.tip = Ext.create('Ext.tip.ToolTip', {
        target: sender.el,
        html: '<span class="hintClass">MyHint</span>'
    });
 
But at some point I need to change the hint at runtime.
Any idea how I can do it?

 

Share this post


Link to post
Share on other sites

Hi,

 

You can try, like this for example:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniImage1.JSInterface.JSCall('tip.update', ['New hint']);
end;

Best regards,

Share this post


Link to post
Share on other sites

Hi,

 

Can you try to use this extension too?!:

http://forums.unigui.com/index.php?/topic/6039-the-callout-extension/

 

Best regards,

 

Hello "Delphi Developer" for this extension I created this unit.
Maybe it's useful to someone.
 
    with TuniCallOut.Create do
    Begin
      Theme := cssYellow;
      Width := 600;
      Text := 'mensagem teste';
      Target := UniButton2;
      Show;
    End;

Callout.rar

Share this post


Link to post
Share on other sites

Hello,

@Delphi Developer, Thank your suggestion, but its need to triggered code, I mean, your suggestion work "like" showmessage(). I wanna "HINT". Default unigui has it, but I wanna use html text in hint. fast and easy way use css on this.

Can see in previous message, two link has example has. When mouse over text, hint or tooltip popup. I wanna apply this css in my project. How can I do this?

 

@showdown, thank you for shared code. I need popup this message or callout message onHint. unigui has not onhint event, so I'm looking for solution.

If I were yoou, I'm not create class for each use. Your class's job just build string for " UniSession.AddJS(". This can make in function(_Target : TUniControl;_Theme : TcoThemeCSS=cssDefault;.....): string. ofcourse this is my way

 

Thank you, regards

Share this post


Link to post
Share on other sites

Hi,

 

@Delphi Developer, Thank your suggestion, but its need to triggered code, I mean, your suggestion work "like" showmessage(). I wanna "HINT". Default unigui has it, but I wanna use html text in hint. fast and easy way use css on this.

Can see in previous message, two link has example has. When mouse over text, hint or tooltip popup. I wanna apply this css in my project. How can I do this?

 

You can try this, for example:

 

1. CustomCSS:

 

 

.tooltip {
  position: relative;
  background: #ff3466;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
}

.tooltip:before,
.tooltip:after {
  position: absolute;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
}

.tooltip:before {
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: #ff3466 transparent transparent transparent;
  top: -15px;
   transform: translateY(20px);
}

.tooltip:after {
  content: attr(data-tooltip);
  background: #ff3466;
  width: 160px;
  height: 40px;
  font-size: 13px;
  font-weight: 300;
  top: -75px;
  left: -10px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
   transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}

 

 

 

2. UniLabel -> TextConversion = txtHTML

 

3. UniLabel -> Caption = <div id="anim"><span class="tooltip" data-tooltip="username must consist of 29 symbols.">?</span></div>

 

Best regards,

 

Share this post


Link to post
Share on other sites

Hello,

How can I remove transparent background? I couldn't find how to do.

regards

post-4508-0-99987400-1515749431.png

Share this post


Link to post
Share on other sites

Hi,

 

Hello,

How can I remove transparent background? I couldn't find how to do.

regards

 

Try this, for example:

 

For you label -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    sender.el.setStyle('z-index', 100);
}

Best regards,

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×