Sidebar with Tooltip Rendering
ASP.NET Core Tooltip can be render on any target with combination positions of left, top, right and bottom.
We can use Tooltip component with Sidebar items. In this sample we have rendered the unordered list in Side Bar and individual tooltip for each sidebar items.
To render the tooltip with proper position, target needs proper width to render tooltip element. So, width of the target should be defined depends on tooltip position.
NOTE: If target width is not enough tooltip element, position of the tooltip will be change due to collision with another element.
Refer to the below code snippet to render the tooltip with sidebar items.
<ejs-sidebar id="default-sidebar" closeOnDocumentClick="false" type="Push" width="280px" target="maincontent">
<e-content-template>
<ul>
<li class="sub-title">
<ejs-tooltip id="Tooltip" position="RightCenter" content="Tasks">
<e-content-template>
<div style="width:100px" class="icon user"><span></span></div>
<div style="width:100px"><span></span></div>
</e-content-template>
</ejs-tooltip>
</li>
<li class="sub-title">
<ejs-tooltip id="tip" position="RightCenter" content="Tasks">
<e-content-template>
<div style="width:100px" class="icon stacking-area"><span></span></div>
<div style="width:100px"><span></span></div>
</e-content-template>
</ejs-tooltip>
</li>
<li class="sub-title">
<ejs-tooltip id="View" position="RightCenter" content="View/Create Client Tasks">
<e-content-template>
<div style="width:100px" class="icon view-details"><span></span></div>
<div style="width:100px"><span>Create Tasks</span></div>
</e-content-template>
</ejs-tooltip>
</li>
<li class="sub-title">
<ejs-tooltip id="Client" position="RightCenter" content="Manage Client Tasks">
<e-content-template>
<div style="width:100px" class="icon to-do-list"><span></span></div>
<div style="width:100px"><span>Manage Tasks</span></div>
</e-content-template>
</ejs-tooltip>
</li>
</ul>
</e-content-template>
</ejs-sidebar>
<div id="head">
<ejs-button id="toggle" isToggle="true" iconCss="e-icons burg-icon" content="Open"></ejs-button>
</div>
<div class="maincontent" style="height:335px;border:1px solid gray">
<div>
<div class="title">Main content</div>
<div class="sub-title">
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('toggle').onclick = function () {
var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
var togglebtn = document.getElementById("toggle").ej2_instances[0];
if (document.getElementById('toggle').classList.contains('e-active')) {
togglebtn.content = 'Close';
defaultSidebar.show();
} else {
togglebtn.content = 'Open';
defaultSidebar.hide();
}
}
});
</script>
I hope you enjoyed learning about Sidebar with Tooltip Rendering.
You can refer to our ASP.NET Core Tooltip’s feature tour page to know about its other groundbreaking feature representations. You can also explore our ASP.NET Core Tooltip documentation to understand how to present and manipulate data.
For current customers, you can check out our ASP.NET Core components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET Core Tooltip and other ASP.NET Core components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
