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>
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?
Hello, Exists any way to show a tooltip in the bubble layers?
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.
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'}
};
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?
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 ;-)
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#"> </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
}
}
#: points[i].value | bytes #
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:
... 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:
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/