Jump to content

Hint " Ext.tip.ToolTip "


shawdown

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?

 

Link to comment
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

Link to comment
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

Link to comment
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,

 

Link to comment
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,

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...