[{"data":1,"prerenderedAt":424},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Finfo-bulles":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Finfo-bulles":423},{"id":4,"title":5,"body":6,"description":410,"extension":411,"meta":412,"navigation":414,"path":419,"seo":420,"stem":421,"__hash__":422},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Finfo-bulles.md","Info-bulles intelligentes",{"type":7,"value":8,"toc":406},"minimark",[9,13,17,20,24,29,45,105,108,228,232,395,402],[10,11,5],"h1",{"id":12},"info-bulles-intelligentes",[14,15,16],"p",{},"Une info-bulle « intelligente » s'affiche seulement quand le texte de l'élément est coupé : points de suspension ou limite de lignes. Si le texte tient en entier, rien ne s'affiche au survol.",[14,18,19],{},"Le bureau utilise ce comportement pour le nom des icônes. Un nom court ne montre pas d'info-bulle. Un nom tronqué montre le nom complet.",[21,22,23],"mermaid",{},"\nflowchart LR\n  A[Survol ou focus] --> B{Le texte est-il tronqué ?}\n  B -- Oui --> C[Info-bulle avec le texte complet]\n  B -- Non --> D[Aucune info-bulle]\n",[25,26,28],"h2",{"id":27},"utiliser-loption-dans-votre-code","Utiliser l'option dans votre code",[14,30,31,32,36,37,40,41,44],{},"Passez ",[33,34,35],"code",{},"only_on_overflow: true"," à ",[33,38,39],{},"frappe.ui.tooltip",". Sans ",[33,42,43],{},"text",", l'info-bulle reprend le texte de l'élément au moment de l'affichage.",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","frappe.ui.tooltip($cell, { only_on_overflow: true });\n","js","",[33,53,54],{"__ignoreMap":51},[55,56,59,63,67,70,72,76,79,82,85,89,92,96,99,102],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"sTEyZ","frappe",[55,64,66],{"class":65},"sMK4o",".",[55,68,69],{"class":61},"ui",[55,71,66],{"class":65},[55,73,75],{"class":74},"s2Zo4","tooltip",[55,77,78],{"class":61},"($cell",[55,80,81],{"class":65},",",[55,83,84],{"class":65}," {",[55,86,88],{"class":87},"swJcz"," only_on_overflow",[55,90,91],{"class":65},":",[55,93,95],{"class":94},"sfNiH"," true",[55,97,98],{"class":65}," }",[55,100,101],{"class":61},")",[55,103,104],{"class":65},";\n",[14,106,107],{},"Pour de nombreux éléments (une liste, une grille d'icônes), utilisez la délégation. Un seul gestionnaire sur le conteneur sert tous les éléments qui correspondent au sélecteur :",[46,109,111],{"className":48,"code":110,"language":50,"meta":51,"style":51},"const stop = frappe.ui.Tooltip.delegate(page.body, \".icon-title\", {\n    only_on_overflow: true,\n    side: \"bottom\",\n    delay: 150,\n});\n\u002F\u002F stop() retire le gestionnaire\n",[33,112,113,167,180,197,211,221],{"__ignoreMap":51},[55,114,115,119,122,125,128,130,132,134,137,139,142,145,147,150,152,155,159,162,164],{"class":57,"line":58},[55,116,118],{"class":117},"spNyl","const",[55,120,121],{"class":61}," stop ",[55,123,124],{"class":65},"=",[55,126,127],{"class":61}," frappe",[55,129,66],{"class":65},[55,131,69],{"class":61},[55,133,66],{"class":65},[55,135,136],{"class":61},"Tooltip",[55,138,66],{"class":65},[55,140,141],{"class":74},"delegate",[55,143,144],{"class":61},"(page",[55,146,66],{"class":65},[55,148,149],{"class":61},"body",[55,151,81],{"class":65},[55,153,154],{"class":65}," \"",[55,156,158],{"class":157},"sfazB",".icon-title",[55,160,161],{"class":65},"\"",[55,163,81],{"class":65},[55,165,166],{"class":65}," {\n",[55,168,170,173,175,177],{"class":57,"line":169},2,[55,171,172],{"class":87},"    only_on_overflow",[55,174,91],{"class":65},[55,176,95],{"class":94},[55,178,179],{"class":65},",\n",[55,181,183,186,188,190,193,195],{"class":57,"line":182},3,[55,184,185],{"class":87},"    side",[55,187,91],{"class":65},[55,189,154],{"class":65},[55,191,192],{"class":157},"bottom",[55,194,161],{"class":65},[55,196,179],{"class":65},[55,198,200,203,205,209],{"class":57,"line":199},4,[55,201,202],{"class":87},"    delay",[55,204,91],{"class":65},[55,206,208],{"class":207},"sbssI"," 150",[55,210,179],{"class":65},[55,212,214,217,219],{"class":57,"line":213},5,[55,215,216],{"class":65},"}",[55,218,101],{"class":61},[55,220,104],{"class":65},[55,222,224],{"class":57,"line":223},6,[55,225,227],{"class":226},"sHwdD","\u002F\u002F stop() retire le gestionnaire\n",[25,229,231],{"id":230},"options","Options",[233,234,235,251],"table",{},[236,237,238],"thead",{},[239,240,241,245,248],"tr",{},[242,243,244],"th",{},"Option",[242,246,247],{},"Défaut",[242,249,250],{},"Rôle",[252,253,254,267,282,308,331,346,363,379],"tbody",{},[239,255,256,261,264],{},[257,258,259],"td",{},[33,260,43],{},[257,262,263],{},"texte de l'élément",[257,265,266],{},"Texte de l'info-bulle. Affiché comme texte, jamais comme HTML.",[239,268,269,274,279],{},[257,270,271],{},[33,272,273],{},"only_on_overflow",[257,275,276],{},[33,277,278],{},"false",[257,280,281],{},"Affiche l'info-bulle seulement si le texte est tronqué.",[239,283,284,289,294],{},[257,285,286],{},[33,287,288],{},"side",[257,290,291],{},[33,292,293],{},"top",[257,295,296,297,299,300,299,303,299,305,66],{},"Côté préféré : ",[33,298,293],{},", ",[33,301,302],{},"right",[33,304,192],{},[33,306,307],{},"left",[239,309,310,315,320],{},[257,311,312],{},[33,313,314],{},"align",[257,316,317],{},[33,318,319],{},"center",[257,321,322,323,299,326,299,328,66],{},"Alignement : ",[33,324,325],{},"start",[33,327,319],{},[33,329,330],{},"end",[239,332,333,338,343],{},[257,334,335],{},[33,336,337],{},"delay",[257,339,340],{},[33,341,342],{},"500",[257,344,345],{},"Délai au survol, en millisecondes. Au focus clavier, l'info-bulle s'affiche tout de suite.",[239,347,348,353,356],{},[257,349,350],{},[33,351,352],{},"shortcut",[257,354,355],{},"—",[257,357,358,359,362],{},"Raccourci affiché après le texte, par exemple ",[33,360,361],{},"\"ctrl+b\"",". Affichage seul.",[239,364,365,370,374],{},[257,366,367],{},[33,368,369],{},"text_align",[257,371,372],{},[33,373,319],{},[257,375,376,378],{},[33,377,325],{}," aligne un texte sur plusieurs lignes à gauche.",[239,380,381,386,388],{},[257,382,383],{},[33,384,385],{},"class",[257,387,355],{},[257,389,390,391,394],{},"Classe CSS en plus. ",[33,392,393],{},"es-tooltip--plain"," retire la flèche.",[14,396,397,398,401],{},"L'info-bulle se ferme quand le pointeur quitte l'élément, à la perte du focus, avec Échap ou au clic sur l'élément. Pendant l'affichage, l'élément porte ",[33,399,400],{},"aria-describedby"," : les lecteurs d'écran lisent aussi le texte.",[403,404,405],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":51,"searchDepth":58,"depth":169,"links":407},[408,409],{"id":27,"depth":169,"text":28},{"id":230,"depth":169,"text":231},"Afficher une info-bulle seulement quand un texte est tronqué, avec l'option only_on_overflow de frappe.ui.tooltip.","md",{"icon":413,"reviewed":414,"last_verified":415,"sources":416},"i-mdi-tooltip-text",true,"2026-11-03",[417,418],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Ftooltip.js","dodock@develop:frappe\u002Fpublic\u002Fjs\u002Fdesktop_icons.bundle.js","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Finfo-bulles",{"title":5,"description":410},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Finfo-bulles","vIl3QgGaXo9Id_hwbkwwerbPMp-L06C4yPsJPjh40Y0",{},1793871738393]