shawdown Posted December 28, 2017 Share Posted December 28, 2017 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 More sharing options...
Sherzod Posted December 28, 2017 Share Posted December 28, 2017 Hi, You can try, like this for example: procedure TMainForm.UniButton1Click(Sender: TObject); begin UniImage1.JSInterface.JSCall('tip.update', ['New hint']); end; Best regards, Link to comment Share on other sites More sharing options...
shawdown Posted December 28, 2017 Author Share Posted December 28, 2017 Perfect. Thank you so much. Link to comment Share on other sites More sharing options...
Freeman35 Posted December 29, 2017 Share Posted December 29, 2017 Hello, How can I use this tooltip css example for TuniLabel etc.? 1- https://codepen.io/mejiaj/pen/ZGJjvE 2- https://codepen.io/sashatran/pen/KaYYBz thank you. Link to comment Share on other sites More sharing options...
Sherzod Posted December 29, 2017 Share Posted December 29, 2017 Hi, Can you try to use this extension too?!: http://forums.unigui.com/index.php?/topic/6039-the-callout-extension/ Best regards, Link to comment Share on other sites More sharing options...
shawdown Posted December 29, 2017 Author Share Posted December 29, 2017 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 More sharing options...
Freeman35 Posted December 30, 2017 Share Posted December 30, 2017 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 More sharing options...
Sherzod Posted January 3, 2018 Share Posted January 3, 2018 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 More sharing options...
Freeman35 Posted January 5, 2018 Share Posted January 5, 2018 Thank you very much Another perfect solution Best regards Link to comment Share on other sites More sharing options...
Freeman35 Posted January 12, 2018 Share Posted January 12, 2018 Hello, How can I remove transparent background? I couldn't find how to do. regards Link to comment Share on other sites More sharing options...
Sherzod Posted January 12, 2018 Share Posted January 12, 2018 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 More sharing options...
Freeman35 Posted January 13, 2018 Share Posted January 13, 2018 Thank you very much Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now