Tooltip in React Diagram
21 Aug 202624 minutes to read
In Graphical User Interface (GUI), a tooltip is a message that appears when the mouse hovers over an element. Tooltips enhance user experience by providing contextual information, guidance, and feedback without cluttering the interface. The diagram component provides comprehensive tooltip support while dragging, resizing, rotating nodes, and when the mouse hovers over any diagram element.
Default Tooltip
By default, the diagram displays a tooltip showing size, position, and angle information while dragging, resizing, or rotating a node. This provides real-time feedback during interactive operations:
- Drag: Shows current X and Y coordinates of the node.
- Resize: Displays current width and height dimensions.
- Rotate: Indicates the current rotation angle in degrees.
The following images illustrate how the diagram displays node information during these interactions.
| Drag | Resize | Rotate |
|---|---|---|
 |
 |
 |
Disable Default Tooltip
The default tooltip that appears while interacting with nodes can be disabled by removing the Tooltip constraint from the selectorConstraints of the selectedItems property of the diagram.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SelectorConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Default tooltip disabled',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white',
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'}
selectedItems=
//Defines nodes
nodes={node}
//Defines mouse over tooltip
tooltip=<h1 id="tooltip-in-react-ribbon">Tooltip in React Ribbon</h1>
<p>The Ribbon component supports tooltip to show additional information on Ribbon items. The tooltip appears when the user hovers over a Ribbon item.</p>
<h2 id="adding-title">Adding Title</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#title">title</a> property can be used to set the tooltip title for each Ribbon item.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#t9o1lqhed89skmgspgunyo1qmzmqcaye-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#zu3g43auraydzy207hnuyi9exkl0ot09-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="t9o1lqhed89skmgspgunyo1qmzmqcaye-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zu3g43auraydzy207hnuyi9exkl0ot09-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ld633alot41om2d95wgzpqu4q26jrlat"></div>
<h2 id="adding-content">Adding Content</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#content">content</a> property is used to set the tooltip content for each Ribbon item.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#teqglmvtopfks9y40zr1d20xbqkkbwd7-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9rkujskl180pwobu8gcu51zy4wcnni81-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="teqglmvtopfks9y40zr1d20xbqkkbwd7-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9rkujskl180pwobu8gcu51zy4wcnni81-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-0ya42nbwic8a1ddkek2vwug4ov8dvrtb"></div>
<h2 id="adding-tooltip-icon">Adding tooltip icon</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#iconcss">iconCss</a> property is used to specify an icon for the tooltip.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#68xgajwgv5sbz96whfga3rd5z58czdcn-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="68xgajwgv5sbz96whfga3rd5z58czdcn-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-sjcytl3m38125o9zl2kcztfgph9bmuyy"></div>
<h2 id="customization">Customization</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#cssclass">cssClass</a> property allows for customizing the appearance of the tooltip by applying custom CSS styles.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vi1z4vf7wgiedlwplzltze0njzamynsu-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vi1z4vf7wgiedlwplzltze0njzamynsu-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">:</span><span class="nx">root</span> <span class="p">{</span>
<span class="o">--</span><span class="nx">borderColor</span>: <span class="kt">rgb</span><span class="p">(</span><span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">);</span>
<span class="o">--</span><span class="nx">black</span><span class="o">:</span> <span class="err">#</span><span class="mo">000000</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To customize the appearance of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">popup</span> <span class="p">{</span>
<span class="nx">border</span>: <span class="kt">2px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">radius</span>: <span class="kt">5px</span><span class="p">;</span>
<span class="nx">background</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);</span>
<span class="p">}</span>
<span class="cm">/* To customize the arrow of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span><span class="p">,</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">color</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">bottom</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">top</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip title */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">title</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">14px</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip content */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">text</span><span class="o">-</span><span class="nx">container</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">content</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">11px</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-2yhdva6yndz324lzj39xjnpxqleky5nn"></div>
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SelectorConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Default tooltip disabled',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white',
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'}
selectedItems=
//Defines nodes
nodes={node}
//Defines mouse over tooltip
tooltip=<h1 id="tooltip-in-react-ribbon">Tooltip in React Ribbon</h1>
<p>The Ribbon component supports tooltip to show additional information on Ribbon items. The tooltip appears when the user hovers over a Ribbon item.</p>
<h2 id="adding-title">Adding Title</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#title">title</a> property can be used to set the tooltip title for each Ribbon item.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#t9o1lqhed89skmgspgunyo1qmzmqcaye-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#zu3g43auraydzy207hnuyi9exkl0ot09-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="t9o1lqhed89skmgspgunyo1qmzmqcaye-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zu3g43auraydzy207hnuyi9exkl0ot09-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ld633alot41om2d95wgzpqu4q26jrlat"></div>
<h2 id="adding-content">Adding Content</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#content">content</a> property is used to set the tooltip content for each Ribbon item.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#teqglmvtopfks9y40zr1d20xbqkkbwd7-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9rkujskl180pwobu8gcu51zy4wcnni81-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="teqglmvtopfks9y40zr1d20xbqkkbwd7-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9rkujskl180pwobu8gcu51zy4wcnni81-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-0ya42nbwic8a1ddkek2vwug4ov8dvrtb"></div>
<h2 id="adding-tooltip-icon">Adding tooltip icon</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#iconcss">iconCss</a> property is used to specify an icon for the tooltip.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#68xgajwgv5sbz96whfga3rd5z58czdcn-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="68xgajwgv5sbz96whfga3rd5z58czdcn-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-sjcytl3m38125o9zl2kcztfgph9bmuyy"></div>
<h2 id="customization">Customization</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#cssclass">cssClass</a> property allows for customizing the appearance of the tooltip by applying custom CSS styles.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vi1z4vf7wgiedlwplzltze0njzamynsu-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vi1z4vf7wgiedlwplzltze0njzamynsu-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">:</span><span class="nx">root</span> <span class="p">{</span>
<span class="o">--</span><span class="nx">borderColor</span>: <span class="kt">rgb</span><span class="p">(</span><span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">);</span>
<span class="o">--</span><span class="nx">black</span><span class="o">:</span> <span class="err">#</span><span class="mo">000000</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To customize the appearance of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">popup</span> <span class="p">{</span>
<span class="nx">border</span>: <span class="kt">2px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">radius</span>: <span class="kt">5px</span><span class="p">;</span>
<span class="nx">background</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);</span>
<span class="p">}</span>
<span class="cm">/* To customize the arrow of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span><span class="p">,</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">color</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">bottom</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">top</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip title */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">title</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">14px</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip content */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">text</span><span class="o">-</span><span class="nx">container</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">content</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">11px</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-2yhdva6yndz324lzj39xjnpxqleky5nn"></div>
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Tooltip for a Specific Node/Connector
The tooltip can be customized for each node and connector. Remove the InheritTooltip option from the constraints of that node/connector, then set its tooltip property to a custom tooltip object. The following code example illustrates how to customize the tooltip for individual elements.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: 'Node1',
//Sets the position of the Tooltip
position: 'BottomRight',
//Sets the tooltip position relative to the node
relativeMode: 'Object'
},
}];
let connector = [{
id: 'connector1',
sourcePoint: { x: 300, y: 100 },
targetPoint: { x: 400, y: 250 },
tooltip: { content: 'connector' },
constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
}]
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node} connectors={connector}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints,NodeModel, } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: 'Node1',
//Sets the position of the Tooltip
position: 'BottomRight',
//Sets the tooltip position relative to the node
relativeMode: 'Object'
},
}];
let connector = [{
id: 'connector1',
sourcePoint: { x: 300, y: 100 },
targetPoint: { x: 400, y: 250 },
tooltip: { content: 'connector' },
constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
}]
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node} connectors={connector}
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Inherit Diagram Tooltip
The diagram supports inheriting the diagram tooltip when the mouse hovers over any node or connector. To show a tooltip on mouse over, set the diagram’s tooltip property with the tooltip content and position. Ensure that the nodes and connectors have their constraints set to InheritTooltip, as shown in the following example.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.InheritTooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: 'Node1',
},
}];
let connector = [{
id: 'connector1',
sourcePoint: { x: 300, y: 100 },
targetPoint: { x: 400, y: 250 },
tooltip: { content: 'connector' },
constraints: ConnectorConstraints.Default | ConnectorConstraints.InheritTooltip,
}]
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node} connectors={connector}
//Defines mouse over tooltip for a node
tooltip=<h1 id="tooltip-in-react-ribbon">Tooltip in React Ribbon</h1>
<p>The Ribbon component supports tooltip to show additional information on Ribbon items. The tooltip appears when the user hovers over a Ribbon item.</p>
<h2 id="adding-title">Adding Title</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#title">title</a> property can be used to set the tooltip title for each Ribbon item.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#t9o1lqhed89skmgspgunyo1qmzmqcaye-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#zu3g43auraydzy207hnuyi9exkl0ot09-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="t9o1lqhed89skmgspgunyo1qmzmqcaye-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zu3g43auraydzy207hnuyi9exkl0ot09-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ld633alot41om2d95wgzpqu4q26jrlat"></div>
<h2 id="adding-content">Adding Content</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#content">content</a> property is used to set the tooltip content for each Ribbon item.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#teqglmvtopfks9y40zr1d20xbqkkbwd7-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9rkujskl180pwobu8gcu51zy4wcnni81-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="teqglmvtopfks9y40zr1d20xbqkkbwd7-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9rkujskl180pwobu8gcu51zy4wcnni81-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-0ya42nbwic8a1ddkek2vwug4ov8dvrtb"></div>
<h2 id="adding-tooltip-icon">Adding tooltip icon</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#iconcss">iconCss</a> property is used to specify an icon for the tooltip.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#68xgajwgv5sbz96whfga3rd5z58czdcn-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="68xgajwgv5sbz96whfga3rd5z58czdcn-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-sjcytl3m38125o9zl2kcztfgph9bmuyy"></div>
<h2 id="customization">Customization</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#cssclass">cssClass</a> property allows for customizing the appearance of the tooltip by applying custom CSS styles.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vi1z4vf7wgiedlwplzltze0njzamynsu-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vi1z4vf7wgiedlwplzltze0njzamynsu-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">:</span><span class="nx">root</span> <span class="p">{</span>
<span class="o">--</span><span class="nx">borderColor</span>: <span class="kt">rgb</span><span class="p">(</span><span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">);</span>
<span class="o">--</span><span class="nx">black</span><span class="o">:</span> <span class="err">#</span><span class="mo">000000</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To customize the appearance of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">popup</span> <span class="p">{</span>
<span class="nx">border</span>: <span class="kt">2px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">radius</span>: <span class="kt">5px</span><span class="p">;</span>
<span class="nx">background</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);</span>
<span class="p">}</span>
<span class="cm">/* To customize the arrow of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span><span class="p">,</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">color</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">bottom</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">top</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip title */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">title</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">14px</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip content */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">text</span><span class="o">-</span><span class="nx">container</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">content</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">11px</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-2yhdva6yndz324lzj39xjnpxqleky5nn"></div>
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,ConnectorConstraints,NodeModel, } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.InheritTooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: 'Node1'
},
}];
let connector = [{
id: 'connector1',
sourcePoint: { x: 300, y: 100 },
targetPoint: { x: 400, y: 250 },
tooltip: { content: 'connector' },
constraints: ConnectorConstraints.Default | ConnectorConstraints.InheritTooltip,
}]
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node} connectors={connector}
//Defines mouse over tooltip for a node
tooltip=<h1 id="tooltip-in-react-ribbon">Tooltip in React Ribbon</h1>
<p>The Ribbon component supports tooltip to show additional information on Ribbon items. The tooltip appears when the user hovers over a Ribbon item.</p>
<h2 id="adding-title">Adding Title</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#title">title</a> property can be used to set the tooltip title for each Ribbon item.</p>
<div class="tabs" id="code-snippet-1">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#t9o1lqhed89skmgspgunyo1qmzmqcaye-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#zu3g43auraydzy207hnuyi9exkl0ot09-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="t9o1lqhed89skmgspgunyo1qmzmqcaye-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="ta4ak2xihv509xi2mrt5yhcorcmng7r3-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="zu3g43auraydzy207hnuyi9exkl0ot09-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-ld633alot41om2d95wgzpqu4q26jrlat" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipTitle');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-ld633alot41om2d95wgzpqu4q26jrlat"></div>
<h2 id="adding-content">Adding Content</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#content">content</a> property is used to set the tooltip content for each Ribbon item.</p>
<div class="tabs" id="code-snippet-2">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#teqglmvtopfks9y40zr1d20xbqkkbwd7-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#9rkujskl180pwobu8gcu51zy4wcnni81-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="teqglmvtopfks9y40zr1d20xbqkkbwd7-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="9rkujskl180pwobu8gcu51zy4wcnni81-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="m9756uc66hbzzf6f1gsyf3ejor5kpmec-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-0ya42nbwic8a1ddkek2vwug4ov8dvrtb" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipContent');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-0ya42nbwic8a1ddkek2vwug4ov8dvrtb"></div>
<h2 id="adding-tooltip-icon">Adding tooltip icon</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#iconcss">iconCss</a> property is used to specify an icon for the tooltip.</p>
<div class="tabs" id="code-snippet-3">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#68xgajwgv5sbz96whfga3rd5z58czdcn-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="eb3l8oiggpmn9wpktlao9vy3y2ut5paf-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="gserphdqil2jxmgnbsnhv4rv2ebjtzx2-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-cut"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-copy"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-paste"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">iconCss</span><span class="o">:</span> <span class="s2">"e-icons e-format-painter"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="68xgajwgv5sbz96whfga3rd5z58czdcn-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-sjcytl3m38125o9zl2kcztfgph9bmuyy" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/TooltipIcon');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-sjcytl3m38125o9zl2kcztfgph9bmuyy"></div>
<h2 id="customization">Customization</h2>
<p>The <a href="https://ej2.syncfusion.com/react/documentation/api/ribbon/ribbonTooltip#cssclass">cssClass</a> property allows for customizing the appearance of the tooltip by applying custom CSS styles.</p>
<div class="tabs" id="code-snippet-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#vi1z4vf7wgiedlwplzltze0njzamynsu-js" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.jsx" data-original-lang="js">index.jsx</a></li>
<li role="presentation" class=""><a data-target="#hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.tsx" data-original-lang="ts">index.tsx</a></li>
<li role="presentation" class=""><a data-target="#6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" aria-controls="home" role="tab" data-toggle="tab" data-tab-name="index.css" data-original-lang="ts">index.css</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="vi1z4vf7wgiedlwplzltze0njzamynsu-js" data-original-lang="js">
<div class="highlight"><pre><code class="prettyprint language-js" data-lang="js"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="hzgmbvfqock1u0ltx1cemhn1seqz9u4z-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">React</span> <span class="kr">from</span> <span class="s2">"react"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="kr">as</span> <span class="nx">ReactDom</span> <span class="kr">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RibbonComponent</span><span class="p">,</span> <span class="nx">RibbonTabsDirective</span><span class="p">,</span> <span class="nx">RibbonTabDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionsDirective</span><span class="p">,</span> <span class="nx">RibbonCollectionDirective</span><span class="p">,</span> <span class="nx">RibbonGroupsDirective</span><span class="p">,</span> <span class="nx">RibbonGroupDirective</span><span class="p">,</span> <span class="nx">RibbonItemsDirective</span><span class="p">,</span> <span class="nx">RibbonItemDirective</span><span class="p">,</span> <span class="nx">RibbonItemSize</span><span class="p">,</span> <span class="nx">RibbonTooltipModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-react-ribbon"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ItemModel</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@syncfusion/ej2-splitbuttons"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">cutOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Cut"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Places the selected text or object on the clipboard so that you can paste it somewhere else."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">copyOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Copy"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the chosen text or object to the clipboard so that you can reuse it elsewhere."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Paste"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Insert the clipboard content where the cursor is currently placed."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">painterOptions</span>: <span class="kt">RibbonTooltipModel</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">title</span><span class="o">:</span> <span class="s2">"Format Painter"</span><span class="p">,</span> <span class="nx">content</span><span class="o">:</span> <span class="s2">"Copies the formatting style of a selected text or object and applies it to other content within the document."</span><span class="p">,</span> <span class="nx">cssClass</span><span class="o">:</span> <span class="s2">"custom-tooltip"</span> <span class="p">};</span>
<span class="kd">const</span> <span class="nx">pasteOption</span>: <span class="kt">ItemModel</span><span class="p">[]</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep Source Format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Merge format"</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">"Keep text only"</span> <span class="p">}];</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RibbonComponent</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"ribbon"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonTabDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Home"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonGroupDirective</span> <span class="nx">header</span><span class="o">=</span><span class="s2">"Clipboard"</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"SplitButton"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">pasteOptions</span><span class="p">}</span>
<span class="nx">splitButtonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="nx">RibbonCollectionDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemsDirective</span><span class="o">></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Large</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">cutOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">copyOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="nx">RibbonItemDirective</span> <span class="kr">type</span><span class="o">=</span><span class="s2">"Button"</span> <span class="nx">allowedSizes</span><span class="o">=</span><span class="p">{</span><span class="nx">RibbonItemSize</span><span class="p">.</span><span class="nx">Medium</span><span class="p">}</span> <span class="nx">ribbonTooltipSettings</span><span class="o">=</span><span class="p">{</span><span class="nx">painterOptions</span><span class="p">}</span> <span class="nx">buttonSettings</span><span class="p">=></span>
<span class="o"><</span><span class="err">/RibbonItemDirective></span>
<span class="o"><</span><span class="err">/RibbonItemsDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionDirective></span>
<span class="o"><</span><span class="err">/RibbonCollectionsDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupDirective></span>
<span class="o"><</span><span class="err">/RibbonGroupsDirective></span>
<span class="o"><</span><span class="err">/RibbonTabDirective></span>
<span class="o"><</span><span class="err">/RibbonTabsDirective></span>
<span class="o"><</span><span class="err">/RibbonComponent></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
<span class="nx">ReactDom</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">App</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"element"</span><span class="p">));</span></code></pre></div>
</div>
<div role="tabpanel" class="tab-pane" id="6xmyhdc7dkmsy3x6713tddb61c4h12r7-ts" data-original-lang="ts">
<div class="highlight"><pre><code class="prettyprint language-ts" data-lang="ts"><span></span><span class="cm">/* Represents the styles for loader */</span>
<span class="err">#</span><span class="nx">loader</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mo">00</span><span class="mf">8</span><span class="nx">cff</span><span class="p">;</span>
<span class="nx">height</span>: <span class="kt">40px</span><span class="p">;</span>
<span class="nx">left</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">position</span>: <span class="kt">absolute</span><span class="p">;</span>
<span class="nx">top</span>: <span class="kt">45</span><span class="o">%</span><span class="p">;</span>
<span class="nx">width</span>: <span class="kt">30</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">:</span><span class="nx">root</span> <span class="p">{</span>
<span class="o">--</span><span class="nx">borderColor</span>: <span class="kt">rgb</span><span class="p">(</span><span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">,</span> <span class="mf">72</span><span class="p">);</span>
<span class="o">--</span><span class="nx">black</span><span class="o">:</span> <span class="err">#</span><span class="mo">000000</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To customize the appearance of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">popup</span> <span class="p">{</span>
<span class="nx">border</span>: <span class="kt">2px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">radius</span>: <span class="kt">5px</span><span class="p">;</span>
<span class="nx">background</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);</span>
<span class="p">}</span>
<span class="cm">/* To customize the arrow of the tooltip */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span><span class="p">,</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">inner</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">color</span>: <span class="kt">var</span><span class="p">(</span><span class="o">--</span><span class="nx">black</span><span class="p">);;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">top</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">bottom</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">arrow</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">outer</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">bottom</span> <span class="p">{</span>
<span class="nx">border</span><span class="o">-</span><span class="nx">top</span>: <span class="kt">8px</span> <span class="nx">solid</span> <span class="kd">var</span><span class="p">(</span><span class="o">--</span><span class="nx">borderColor</span><span class="p">);;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip title */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">title</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">14px</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* To change the size of the tooltip content */</span>
<span class="p">.</span><span class="nx">custom</span><span class="o">-</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">tip</span><span class="o">-</span><span class="nx">content</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">text</span><span class="o">-</span><span class="nx">container</span> <span class="p">.</span><span class="nx">e</span><span class="o">-</span><span class="nx">ribbon</span><span class="o">-</span><span class="nx">tooltip</span><span class="o">-</span><span class="nx">content</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span>: <span class="kt">11px</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
</div>
</div>
</div>
<p><button class="preview-sample-button" id="PreviewSampleButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="LoadPreviewSample('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-2yhdva6yndz324lzj39xjnpxqleky5nn" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/react/documentation/code-snippet/ribbon/CustomTooltip');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"><span class="stackblitz-text">Open in Stackblitz</span></button></p>
<div id="PreviewSampleHolder-2yhdva6yndz324lzj39xjnpxqleky5nn"></div>
/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Disable Tooltip at Runtime
The tooltip on mouse over can be disabled by assigning the diagram’s tooltip property as null. The following code example illustrates how to disable the mouse over tooltip at runtime.
//Initializes the diagram component
<DiagramComponent id="container" width={'650px'} height={'350px'}
//Defines nodes
nodes={node} connectors={connector}
//Disables mouse over tooltip at runtime
tooltip={null}
/>
Tooltip for Ports
The diagram supports tooltips for ports, displaying information or descriptions when the mouse hovers over them.
To display tooltips on mouse over, set the desired tooltip content by utilizing the tooltip property.
Tooltips for Ports can be enabled or disabled using the PortConstraints Tooltip property.
let ports: [{
offset: {x: 1,y: 0.5},
tooltip: {content: 'Port Tooltip'},
//enable Port Tooltip Constraints
constraints: PortConstraints.Default | PortConstraints.ToolTip,
//disable Port Tooltip Constraints
constraints: PortConstraints.Default & ~PortConstraints.ToolTip
}]
Dynamic modification of tooltip content is supported, allowing you to change the displayed tooltip content during runtime.
// Change tooltip content at runtime
diagram.nodes[0].ports[0].tooltip.content = 'New Tooltip Content';
diagram.dataBind();
NOTE
Call
dataBind()to apply runtime changes to the tooltip content.
Here, the code provided below demonstrates the port tooltip Interaction.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,PortConstraints,PortVisibility } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
id: "node1",
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
ports:[{
offset: {
x: 0.5,
y: 0
},
visibility: PortVisibility.Visible,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: 'Port Tooltip',
},
constraints: PortConstraints.Default | PortConstraints.ToolTip
}]
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,PortConstraints,PortVisibility,NodeModel } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
ports:[{
offset: {
x: 0.5,
y: 0
},
visibility: PortVisibility.Visible,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: 'Port Tooltip',
},
constraints: PortConstraints.Default | PortConstraints.ToolTip
}]
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The following image illustrates how the diagram displays tooltips during an interaction with ports:
Tooltip Template Content
The tooltip template content allows you to customize the tooltip using HTML templates, giving you the flexibility to include formatted text, images, and other HTML elements within the tooltip.
The following code example illustrates how to add formatted HTML content to the tooltip.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: getContent(),
}
}];
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
function getContent() {
let tooltipContent = document.createElement('div');
tooltipContent.innerHTML = '<div style="background-color: #f4f4f4; color: black; border-width:1px;border-style: solid;border-color: #d3d3d3; border-radius: 8px;white-space: nowrap;"> <span style="margin: 10px;"> Tooltip !!! </span> </div>';
return tooltipContent;
}import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
NodeModel,
DiagramComponent,
DiagramConstraints,
NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
//Sets the content of the Tooltip
content: getContent(),
}
}];
function App() {
return (
<DiagramComponent
id="container"
width={'650px'}
height={'350px'}
constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
function getContent(): HTMLElement {
let tooltipContent: HTMLElement = document.createElement('div');
tooltipContent.innerHTML = '<div style="background-color: #f4f4f4; color: black; border-width:1px;border-style: solid;border-color: #d3d3d3; border-radius: 8px;white-space: nowrap;"> <span style="margin: 10px;"> Tooltip !!! </span> </div>';
return tooltipContent;
}Tooltip Alignments
Tooltip Relative to Object
The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the position property. The relativeMode property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position.
NOTE
Valid
positionvalues includeTopLeft,TopCenter,TopRight,MiddleLeft,Center,MiddleRight,BottomLeft,BottomCenter, andBottomRight.
The following code example illustrates how to position the tooltip around object.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
//Sets the alignment properties
position: 'BottomRight',
//Sets to show tooltip around the element
relativeMode: 'Object',
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
NodeModel,
DiagramComponent,
DiagramConstraints,
NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
//Sets the alignment properties
position: 'BottomRight',
//Sets to show tooltip around the element
relativeMode: 'Object',
},
}];
//Initializes the Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'650px'}
height={'350px'}
constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Tooltip Relative to Mouse Position
To display the tooltip at the mouse position, set the mouse option in the relativeMode property of the tooltip.
The following code example illustrates how to show tooltip at mouse position.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
//Sets to show tooltip at mouse position
relativeMode: 'Mouse',
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
NodeModel,
DiagramComponent,
DiagramConstraints,
NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
let node: NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
}
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
//Sets to show tooltip at mouse position
relativeMode: 'Mouse',
},
}];
//Initializes the Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'650px'}
height={'350px'}
constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Tooltip Animation
To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the animation property. The animation property also allows you to set delay, duration, and various other effects of your choice.
Refer to the following sample, which uses a zoomIn animation to open and a zoomOut animation to close the tooltip, with delay and duration.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
animation: {
//Animation settings to be applied on the Tooltip, while it is being shown over the target.
open: {
//Animation effect on the Tooltip is applied during open and close actions.
effect: 'ZoomIn',
//Duration of the animation that is completed per animation cycle.
duration: 1000,
//Indicating the waiting time before animation begins.
delay: 0
},
//Animation settings to be applied on the Tooltip, when it is closed.
close: {
effect: 'ZoomOut',
duration: 500,
delay: 0
},
},
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
NodeModel,
DiagramConstraints,
NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
let node: NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
animation: {
//Animation settings to be applied on the Tooltip, while it is being shown over the target.
open: {
//Animation effect on the Tooltip is applied during open and close actions.
effect: 'ZoomIn',
//Duration of the animation that is completed per animation cycle.
duration: 1000,
//Indicating the waiting time before animation begins.
delay: 0
},
//Animation settings to be applied on the Tooltip, when it is closed.
close: {
effect: 'ZoomOut',
duration: 500,
delay: 0
},
},
},
}];
//Initializes the Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'650px'}
height={'350px'}
constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Sticky Tooltip
A sticky tooltip will remain visible even after you move the mouse away from the node or connector. You can activate this feature by setting the isSticky property of the tooltip.
The following example shows how to render sticky tooltip.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//Activate sticky mode for tooltip
isSticky: true,
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//Activate sticky mode for tooltip
isSticky: true,
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Hide Tooltip Pointer
The showTipPointer property allows to control the visibility of tooltip pointer. By default, the showTipPointer is set as true.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
content: 'Rectangle',
}],
offsetX: 250,
offsetY: 200,
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//Hide tip pointer
showTipPointer: false,
},
},{
id: "node2",
width: 100,
height: 100,
annotations: [{
content: 'Rectangle',
}],
offsetX:100,
offsetY: 200,
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//Hide tip pointer
showTipPointer: true,
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
content: 'Rectangle',
}],
offsetX: 250,
offsetY: 200,
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//Hide tip pointer
showTipPointer: false,
},
},{
id: "node2",
width: 100,
height: 100,
annotations: [{
content: 'Rectangle',
}],
offsetX:100,
offsetY: 200,
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//Hide tip pointer
showTipPointer: true,
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Tooltip Size
By default, the size of the tooltip is calculated based on its content. If you want to customize the size, you can use the width and height properties of the tooltip.
The following code example shows how to set the size for the tooltip:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content:
'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
position: 'BottomCenter',
relativeMode: 'Object',
//Set size for tooltip
width: 300,
height: 100,
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content:
'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
position: 'BottomCenter',
relativeMode: 'Object',
//Set size for tooltip
width: 300,
height: 100,
},
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Show/Hide Tooltip at Runtime
You can show or hide the tooltip dynamically using a button click with the showTooltip and hideTooltip methods of the diagram. This allows you to control the tooltip visibility programmatically rather than relying on user hover actions. In some cases, you may want to display the tooltip without requiring the user to hover over the object.
The following example demonstrates how to show or hide the tooltip at runtime:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
let diagramInstance;
let node = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//To show tooltip on button click
openOn: 'Custom',
},
}];
//Initializes the Diagram component
function App() {
const showTooltip = () => {
/**
* parameter - The object for which the tooltip will be shown.
*/
diagramInstance.showTooltip(diagramInstance.nodes[0]);
}
const hideTooltip = () => {
/**
* parameter - The object for which the tooltip should be hidden.
*/
diagramInstance.hideTooltip(diagramInstance.nodes[0]);
}
return (
<div>
<button onClick={showTooltip}>showTooltip</button>
<button onClick={hideTooltip}>hideTooltip</button>
<DiagramComponent id="container" width={'650px'}
ref={(diagram) => (diagramInstance = diagram)}
height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints, NodeConstraints,NodeModel } from "@syncfusion/ej2-react-diagrams";
let diagramInstance:DiagramComponent;
let node:NodeModel[] = [{
id: "node1",
width: 100,
height: 100,
annotations: [{
id: 'label',
content: 'Rectangle',
offset: {
x: 0.5,
y: 0.5
},
style: {
color: 'white'
},
}],
offsetX: 200,
offsetY: 200,
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7'
},
constraints: NodeConstraints.Default | NodeConstraints.Tooltip,
//Defines mouse over tooltip for a node
tooltip: {
content: 'Node1',
position: 'BottomCenter',
relativeMode: 'Object',
//To show tooltip on button click
openOn: 'Custom',
},
}];
//Initializes the Diagram component
function App() {
const showTooltip = () => {
/**
* parameter - The object for which the tooltip will be shown.
*/
diagramInstance.showTooltip(diagramInstance.nodes[0]);
}
const hideTooltip = () => {
/**
* parameter - The object for which the tooltip should be hidden.
*/
diagramInstance.hideTooltip(diagramInstance.nodes[0]);
}
return (
<div>
<button onClick={showTooltip}>showTooltip</button>
<button onClick={hideTooltip}>hideTooltip</button>
<DiagramComponent id="container" width={'650px'}
ref={(diagram) => (diagramInstance = diagram)}
height={'350px'} constraints={DiagramConstraints.Default | DiagramConstraints.Tooltip}
//Defines nodes
nodes={node}/>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Tooltip for Annotation
Tooltips can be added to annotations to display additional information on mouseover.
To display tooltips on mouseover, set the desired tooltip text to the tooltip property of the annotation.
Tooltips for Annotations can be enabled or disabled by setting the AnnotationConstraints property as Tooltip.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramConstraints,AnnotationConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [ {
id: 'node1',
offsetX: 150,
offsetY: 150,
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
annotations: [{
id: 'label1',
content: 'Rectangle',
tooltip: {
content: 'Rectangle',
position: 'TopRight',
relativeMode: 'Object',
},
constraints: AnnotationConstraints.Tooltip,
}],
}];
//Initializes the Diagram component
function App() {
return (<DiagramComponent id="container" width={'650px'} height={'350px'}
//Defines nodes
nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
NodeModel,
DiagramComponent,
DiagramConstraints,
AnnotationConstraints,
NodeConstraints
} from "@syncfusion/ej2-react-diagrams";
import {
NodeAnimationSettings
} from '@syncfusion/ej2-navigations';
// A node is created and stored in nodes array.
let node: NodeModel[] = [ {
id: 'node1',
offsetX: 150,
offsetY: 150,
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
annotations: [{
id: 'label1',
content: 'Rectangle',
tooltip: {
content: 'Rectangle',
position: 'TopRight',
relativeMode: 'Object',
},
constraints: AnnotationConstraints.Tooltip,
}],
}];
//Initializes the Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'650px'}
height={'350px'}
//Defines nodes
nodes={node}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);