Black Tooltip tip on the commands button
3 Replies
Hi Rizwan,
Greetings from syncfusion support
Query#: I want to black tooltip tip on the commands button on the normal and edit mode.
Based on your query we could see that you like to show the black tooltip in the command buttons. We have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.
|
@Html.EJS().Tooltip("Tooltip").Target(".e-unboundcelldiv").ContentTemplate(@<div>
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowTextWrap().TextWrapSettings(text => {
text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Both);}).Created("created").Columns(col =>{
col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add();
col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
col.Field("CustomerID").HeaderText("CustomerID").Width("150").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
col.HeaderText("Manage Records").Width("160").Commands(commands).Add();
}).AllowSorting().GridLines(Syncfusion.EJ2.Grids.GridLine.Both).AllowPaging().PageSettings(page => page.PageSize(8).PageSizes(new string[] { "2", "4" })).AllowSorting().Render()
</div>).Render()
<script>
function created(args) {
// get the grid instances
var grid = document.getElementById('Grid').ej2_instances[0];
// adding mouseover event to the grid element
grid.element.addEventListener('mouseover', function (args) {
// get the tooltip instances
var tooltip = document.getElementById('Tooltip').ej2_instances[0];
// change the tooltip content with the cell value only if the target is grid unboundcelldiv
if (args.target.classList.contains('e-btn-icon')) {
if (args.target.classList.contains('e-edit')) {
tooltip.content = "Edit";
}
else if (args.target.classList.contains('e-delete')) {
tooltip.content = "Delete";
}
}
})
}
</script>
|
Screenshot:
Regards,
Rajapandi R
SIGN IN To post a reply.
