Telerik Forums
Kendo UI for Vue Forum
14 questions
Sort by
1 answer
196 views

Hello

I have a question about the tooltip function.

I've made a modification to Tooltip-Multiple Targets.

-remove width props
-Tooltip insertion for each language

https://www.telerik.com/kendo-vue-ui/components/popups/tooltip/multiple-targets/

If you hover over a long tooltip, it will appear properly, but if you check the short tooltip first and then try to see the long tooltip, the tooltip's width will be shortened.

Hopefully the width will be adjusted to auto.

 

<div id="vueapp" class="vue-app">
    <kendo-tooltip ref="kTooltip" id="agglomerations" :filter="'span'"  :position="'bottom'">
        <span href="#" title="방탄소년단·태연, '서울가요대상' 앨범·음원 대상…엑소 4관왕(종합)">Korean</span><br /><br />
        <span href="#" title="방탄" id="losangeles">Korean - Short</span><br /><br /> 
        <span href="#" title="Apple Music is available in iTunes, and for iOS and Android devices.">English</span><br /><br />
<span href="#" title="BTS" id="osaka">English - Short</span><br /><br />
        <span href="#" title="注文書、請求書などを装ったメールに添付された Excel ファイルに注意">Japanese</span><br /><br />
        <span href="#" title="注意" id="moscow">Japanese - Short</span>
    </kendo-tooltip>
</div>

Ivan Danchev
Telerik team
 answered on 03 Feb 2020
1 answer
575 views

I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):

On this example, instead of the "ProductName Column Menu" tooltip text,  I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?

Petar
Telerik team
 answered on 15 Apr 2022
1 answer
86 views

 

Hello, Exists any way to show a tooltip in the bubble layers?
Thanks in advance

Petar
Telerik team
 answered on 20 Oct 2022
0 answers
108 views

I'm trying to get a tooltip to show when hovering a cell when the characters inside the cell are more than 12 characters.

    <template v-slot:reservationNameTemplate="{ props }">
        <td :style="truncateDescriptionText(props.dataItem)">
          {{ props.dataItem[props.field] }}
        </td>
    </template>

This is working fine to truncate the text inside the cell, however when I try to warp it with the Tooltip like this the truncate stops working and I get no tooltip on hover

      <template v-slot:reservationNameTemplate="{ props }">
        <Tooltip :anchor-element="'target'" :position="'bottom'">
          <td>
            {{ props.dataItem[props.field] }}
          </td>
        </Tooltip>
        <td :style="truncateDescriptionText(props.dataItem)">
          {{ props.dataItem[props.field] }}
        </td>
      </template>

Thank you.

Vincent
Top achievements
Rank 1
Iron
 asked on 17 Feb 2023
2 answers
854 views

I am trying to figure out how to replace the points (open circle dots) on a line chart with just a smooth line. I have been looking through the chart API and thought the solution would be the plot area border dash type. However, this doesn't appear to do anything. I am either implementing it incorrectly or it is not the correct solution. A third possibility is that it is buggy and does not work. I am using Vue with typescript. Below is my attempted implementation:

<kendo-chart :data-source="chartData"
:series="series"
:pannable-lock="'y'"
:zoomable-mousewheel-lock="'y'"
:zoomable-selection-lock="'y'"
:category-axis="categoryAxis"
:theme="'sass'"
:category-axis-title-text="'Time'"
:value-axis-title-text="'Attribute'"
:tooltip="tooltip"
:plot-area="plotArea">
</kendo-chart>

plotArea: any = {
border: {dashType: 'solid'}
};

Nikolay
Telerik team
 answered on 02 Mar 2020
1 answer
386 views

By default, the grid column menu (https://www.telerik.com/kendo-vue-ui/components/grid/columns/column-menu/) displays a weird tootip on hover, containing the field name and a "Column Menu" text:

I'd like to either remove this tooltip or customize it (for instance, by changing it's text with the title - and not the name - of the field, plus removing the "Column Menu" text). Is there a way to to this?

The documentation contains a "GridColumnMenuItemProps" section, and I see a "title" prop that could be useful (https://www.telerik.com/kendo-vue-ui/components/grid/api/GridColumnMenuItemProps/#toc-title). But I haven't found a way to pass this prop (at least, I haven't found anything on the documentation about it).

Is this possible?

Petar
Telerik team
 answered on 14 Mar 2022
1 answer
544 views

Hi,

I'm looking for the best way to display a tooltip when hovering over the value of a cell (very useful for custom commands).

I have already defined a template for the line and it works:

<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class="k-master-row"  data-uid="#: uid #" role="row">
<td role="gridcell">   #: OrderID # </td>
<td role="gridcell">   #: ShipName #</td>
<td role="gridcell">   #: Freight #</td>
<td role="gridcell">   #: OrderDate #</td><br>      
</tr>
</script>

 

What is the best way to show a TootlTip for example hover  "OrderID " value ?
Thanks in advance ;-)

Veselin Tsvetanov
Telerik team
 answered on 04 Apr 2019
1 answer
134 views

I'm using vuejs.

I've got a chart with a tooltip:

import { bytes } from '...fileBytesIsIn'
get tooltip () {
  const sharedTemplate = `<table class="tooltip-table" width="150">
  // removed header to save space
  # for (var i = 0; i < points.length; i++) { #
    <tr>
      <td><div class="swatch #: points[i].series.class#">&nbsp;</span></td>
      <td class="name" nowrap>#: points[i].series.name#</td>
      <td class="val">#: bytes(points[i].value) #</td>
    </tr>
  # } #
  </table>`
  return {
    visible: true,
    shared: true,
    template: '#= value #',
    sharedTemplate: sharedTemplate
  }
}
My issue: bytes is undefined. I've tried it like a filter 
#: points[i].value | bytes #
and several other ways, but nothing seems to work. Is there any way I can apply my formatting function to this value in the tooltip sharedTemplate so I can display these values as readable file sizes?
Plamen
Telerik team
 answered on 30 Jul 2021
1 answer
105 views

I am trying to setup a blank project using Vite and Vue 3 since Vite is suggested tooling for new Vue 3 projects.

I am getting type errors despite "skipLibCheck": true in the tsconfig.

Environment:

> node -v
v16.14.2

> pnpm -v
6.32.4

> pnpm tsc -v
Version 4.6.3

Reproduction steps:

  1. Checkout https://github.com/shashwatsingh/kendo-vite
  2. cd dropdown
  3. pnpm install
  4. pnpm dev # this works
  5. pnpm build # this fails

... more lines...

node_modules/.pnpm/@progress+kendo-vue-popup@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-popup/dist/npm/additionalTypes.ts:9:68 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'. 9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type }; ~~~~~~~~ Found 6 errors in 3 files. Errors Files 2 node_modules/.pnpm/@progress+kendo-vue-common@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-common/dist/npm/additionalTypes.ts:9 2 node_modules/.pnpm/@progress+kendo-vue-dropdowns@3.2.4_4d853744181ba70ddba87c6a33341cef/node_modules/@progress/kendo-vue-dropdowns/dist/npm/additionalTypes.ts:9 2 node_modules/.pnpm/@progress+kendo-vue-popup@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-popup/dist/npm/additionalTypes.ts:9


Same steps, but tooltip folder in the repository root gives different errors:

node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9:10 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
           ~~~~~~~~~~~~~~~
node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9:68 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
                                                                     ~~~~~~~~
Found 2 errors in the same file, starting at: node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9

 

All this works in a vue cli project without issues. However, due to the size of our project, the build times are increasing. So we're looking at alternatives.

I have two questions:

  1. Is s something wrong in the above code? Am I using something unsupported?
  2. Does Kendo for Vue product suite support Vite?
Plamen
Telerik team
 answered on 22 Apr 2022
8 answers
135 views

There is a tabstip problem in ios 13.3. (iPad)

The tabstrip scroll icon is not clicked.

Click doesn't work so it's impossible to check the contents of the next tab.

Please confirm.

https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/scrollable-tabs/

Ivan Danchev
Telerik team
 answered on 22 Jan 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?