CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvc
Akbari
Akbari

Reputation: 2409

Adding tooltip to Kendo Toolbar buttons

I have a Kendo Toolbar with some buttons, all of the buttons have Images and I don't use text in them. How can I add tooltip, or alt text to them?

Is Kendo Tooltip the only solution?

@(Html.Kendo().ToolBar()
    .Name("toolbar")
    .Items(items =>
    {
        items.Add().Type(CommandType.Button).Text(" ").Click("").ImageUrl("/Content/Images/Icon/Add.png");
...

If I use a template to use the image, as suggested by @rozerocool. I'll loose the button style. See the below picture, the right one is using a template and the left one is using ImageUrl.

enter image description here

UPDATE

as @rozerocool suggested, I'm using template.

items.Add().Template("<img src='" + Url.Content("~/Content/Images/Icon/Add.png") + "' alt='add image' title='Add image tooltip' />");

It doesn't render as a button, therefore it's not clickable. Unless I add some classes to it:

.HtmlAttributes(new { @class = "k-button k-button-icon" })

With these classes, It'll be a clickable button, but still it doesn't function and I'll get error when clicking it.

It seems that template isn't really useful in this case.

Specifies what element will be added in the ToolBar wrapper. Items with template does not have a type.

Upvotes: 2

Views: 7529

Answers (3)

CMS
CMS

Reputation: 3757

As of now (from Q2 2014) you can add attributes: { title: "any tooltip" }

if you want kendo's Tool tip

just do

$(".k-toolbar [title]").kendoTooltip({
    position:"top"
});

Full code would look like this

$("#toolbar").kendoToolBar({
    items: [
        { type: "button", text: "MyButton", id: "myButton", attributes: { title: "my tool tip" }  },
        { type: "button", text: "Toggle Button", togglable: true },
        { type: "separator" }
    ]
});
$(".k-toolbar [title]").kendoTooltip({
    position:"top"
});

Upvotes: 0

micpok
micpok

Reputation: 41

As @chiapa suggested you can simply use an id and Kendo Tooltips:

// Toolbar with button
$('#toolbar').kendoToolBar({
   items: [
      { type: "button", text: "MyButton", id: "btn_mybutton" }
   ]
});

// The Tooltip
$('#btn_mybutton').kendoTooltip({
    position: "bottom",
    content: "Here is the TT-Text"
});

Upvotes: 4

rozerocool
rozerocool

Reputation: 170

You can configure your button like this:

items.Add().Template("<img src='" + 
Url.Content("~/Content/Images/Icon/Add.png") + 
"' alt='add image' title='Add image tooltip' />");

You can find more about Kendo Toolbar in here.

Upvotes: 1

Related Questions