Telerik Forums
Kendo UI for Vue Forum
15 questions
Sort by
1 answer
219 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
633 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
90 views

 

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

Petar
Telerik team
 answered on 20 Oct 2022
1 answer
415 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
51 views

Hello , I would like to add a class to the ChartSeriesItem,  the hand cursor pointer :


This is my code :

Chart.m-4.p-5#range-bar-chart( @seriesclick="onSeriesClick" :style="{ height: getChartHeight() }")
  ChartTooltip(:render="'tooltipRender'" background="#fff" color="#000" position="left")
    template(v-slot:tooltipRender="{ props }")
      .d-flex.align-items-center.flex-column.tooltip-content
        h6.font-weight-bold.text-center.tooltip-category-title {{ props.point.category }}
        .d-flex.align-items-center
          span {{ $t('home.rangeBarChart.date.start') }} :
          span.font-weight-bold.ml-1 {{ labelContentFrom(props.point)}}
        .d-flex.align-items-center
          span {{ $t('home.rangeBarChart.date.end') }} :
          span.font-weight-bold.ml-1 {{ labelContentTo(props.point)}}
  ChartTitle( v-if="chartTitle && chartTitle !== ''"  :text="$t('home.rangeBarChart.'+ chartTitle + '.title' )"  align='left' color='#475467' :font="'600 16px Inter'")
    ChartCategoryAxisItem( :categories="categoriesValues" :major-grid-lines='{visible: false }' :margin=10 :font="'600 14px Inter '" )
  ChartCategoryAxis
    ChartCategoryAxisItem( :major-grid-lines='{visible: false }' :categories="categoriesValues" :margin=10 :font="'600 14px Inter '" :labels="{visible: true, visual: getYAxisLabels}")  
  ChartValueAxis
    ChartValueAxisItem(
    :major-grid-lines="{visible: false }" 
    :crosshair="{visible: false }" 
    :min="valueAxisObj.min" 
    :max="valueAxisObj.max" 
    :fromField="'min'" 
    :toField="'max'"
    :font="'600 14px Inter '"
    :rotation="'auto'" 
    :labels="{ visual: getTimeLabels}"
    )    
  ChartSeries
    ChartSeriesItem(:type="rangeBarType", :data-items="myDataItemsComputed"  :category-field="'phase'" :font="'600 14px Inter '" :color="barItemColor"  )
      ChartSeriesLabels
        ChartSeriesLabelsFrom(:content="labelContentFrom" )
        ChartSeriesLabelsTo(:content="labelContentTo")  

 

Konstantin Dikov
Telerik team
 answered on 09 Feb 2024
1 answer
148 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
2 answers
929 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
565 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
0 answers
130 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
1 answer
120 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
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Editor
DatePicker
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
DateTimePicker
Gantt wrapper
Chart
Chart wrappers (package)
ComboBox
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Popup
Window
Error
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
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
Button
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
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?