[CLOSED] QuickTips and QuickTipManager

Printable View

Feb 07, 2019, 3:16 PM
NewLink

[CLOSED] QuickTips and QuickTipManager

Hello support team,
am I wrong if I expect the following code to work?

Code:

@using Ext.Net; @using Ext.Net.MVC; @{ ViewBag.Title = "QTip"; Layout = null; } <!DOCTYPE html> <html> <head> <title>Ext.NET MVC Test Case</title> <style> .tooltip { background-color: #fbf3db; border-color: #9d9d9d; } </style> </head> <body> @(Html.X().ResourceManager()) @(Html.X().Panel() .BodyPadding(10) .Border(false) .Items( Html.X().Button().Text("Test").Width(100).ToolTip("tooltip").ToolTipType(ToolTipType.Qtip) ) ) </body> </html> <script type="text/javascript"> Ext.onReady(function () { Ext.tip.QuickTipManager.init(); Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), { anchor: "top", cls: "tooltip", title: "tooltip_title" }); console.log('QT', Ext.tip.QuickTipManager.getQuickTip()); }); </script>

I assume that using QuickTipManager, I should be able to configure and manage tooltips globally. Or did not I understand it?

Thank you.

Kind regards
Dan
Feb 08, 2019, 4:19 PM
fabricio.murta

Hello Dan!

Thanks for providing the test case! It run fine, and I believe your inquiry is about the effects you set on the tooltips not applying thru when they are displayed.

According to Ext JS documentation on QuickTipManager, the cls and title options are only meaningful in a context that involves the tooltip target; that is, when you call its register() method to bind a tooltip to a component. So they are ignored when you are setting global options for the tooltips (via Ext.apply()).

To attain your goal in a single place, you can specify a custom CSS for the quicktips with this (changing the text, background and border colors):

Code:

#ext-quicktips-tip { background-color: #fbf3db; border-color: #9d9d9d } #ext-quicktips-tip-body, #ext-quicktips-tip_header .x-tip-header-title { color: black }

Notice depending on what you want/need to CSS-format, it would be best to inspect the quicktips DOM to see where the style is set to override. Above we needed to point the overall quicktips container ID (it should always be the same), then also another block selecting the tip body and header to set the foreground color to black (in the default, 'Triton' theme at least, the tooltip foreground color is white, so the text gets invisible using the style colors chosen in the provided test case).

You may miss a means to specify the tooltip title to every component not using specific tooltips; and in fact it is not really so evident. To do so, you'd need to set up the tooltip either on:

- client-side/javascript, via the Ext.tip.QuickTipManager.register() (see documentation linked above for usage)
- razor markup, using CustomConfig, like below:

Code:

.CustomConfig((c) => { c.Add(new ConfigItem() { Name = "tooltip", Value = "{ text: 'tooltip', title: 'myTitle' }", Mode = ParameterMode.Raw }); })

You can benefit from code reusage from Razor Markup by replacing, for instance, the myTitle string with a variable, concatenating the string as an ordinary C# code, e.g.: "{ title: '" + titleVariable + "' }".

Hope this helps!
Feb 11, 2019, 10:19 AM
NewLink

Hello FabrÃ*cio,
thank you for your explanation. As is common with your contributions, it is a very comprehensive and clear answer.

I've already been able to customize the tooltip layout with x-tip-default override. Before I asked my question, I also read the documentation you refer to. But I was curious to see if there is any way to force Ext.tip.QuickTipManager to work really globally, because - to be honest - I would expect that if something is designed to be used generally, then the settings should be applied in any case without thinking instead of the programmer, whether the setting makes sense or not.

However, thank you for your assistance, the thread may be closed.

Kind regards
Dan
Feb 11, 2019, 2:23 PM
fabricio.murta

Hello @NewLink!

I agree with you, it is not really intuitive and I also had to spend some time and dig thru the docs to understand why it didn't just accept any setting. Unfortunately that's a design trait that comes from the upstream project (Ext JS) we interface.

The good news is, you can always write an override/extension to support something you miss. Although this would require an additional level in the learning curve both for Ext.NET and Ext JS inner workings, it could prove worthwhile if you intend on heavily reusing that bit of functionality throughout your application.

Last but not least, thanks for understanding and also for your kind feedback about the answers! We really appreciate it!