New to Telerik UI for ASP.NET Core? Download free 30-day trial

Tag Helper

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        tag_helper.cshtml
                    
                        Tag_HelperController.cs

kendo.syncReady(function(){jQuery("#agglomerations").kendoTooltip({"width":120,"position":"top","animation":{"open":{"effects":"fade:in","duration":300}},"filter":"span"});}); .demo-section { width: 692px; } #agglomerations { position: relative; width: 692px; height: 480px; margin: 0 auto; background: url('/aspnet-core/shared/web/tooltip/world-map.jpg') no-repeat 0 0; } #agglomerations span { cursor: pointer; position: absolute; display: block; width: 12px; height: 12px; background-color: #fff600; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 0; -moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.5); box-shadow: 0 0 0 1px rgba(0,0,0,0.5); -moz-transition: -moz-box-shadow .3s; -webkit-transition: -webkit-box-shadow .3s; transition: box-shadow .3s; } #agglomerations span:hover { -moz-box-shadow: 0 0 0 15px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 15px rgba(0,0,0,0.5); box-shadow: 0 0 0 15px rgba(0,0,0,0.5); -moz-transition: -moz-box-shadow .3s; -webkit-transition: -webkit-box-shadow .3s; transition: box-shadow .3s; } #canton { top: 226px; left: 501px; } #jakarta { top: 266px; left: 494px; } #mexico { top: 227px; left: 182px; } #delhi { top: 214px; left: 448px; } #karachi { top: 222px; left: 431px; } #newyork { top: 188px; left: 214px; } #saopaolo { top: 304px; left: 248px; } #bombay { top: 233px; left: 438px; } #losangeles { top: 202px; left: 148px; } #osaka { top: 201px; left: 535px; } #moscow { top: 153px; left: 402px; } #canton:hover, #jakarta:hover, #mexico:hover, #delhi:hover, #karachi:hover, #newyork:hover, #saopaolo:hover, #bombay:hover, #losangeles:hover, #osaka:hover, #moscow:hover { z-index: 10; }

Description

This example shows how you can use the tag-helper for ASP.NET Core Tooltip component.

Tag Helper

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo