ExTooltip

v1.0.0Control

ExSDK tooltip control for SAP UI5/Fiori applications.

Namespace
ux7.control.ExTooltip
Extends
sap.ui.core.Control
XML tag
<ExTooltip />
Quick Start
<VBox id="idTooltipVBox" class="sapUiMediumMargin" width="100%">

  <!-- Placement -->
  <ux7:ExTitle id="idPlacementExTitle" text="Placement — smart flip" level="h3" variant="section" />
  <FlexBox id="idPlacementFlexBox" wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExTooltip id="idTipTop" text="Üstte gösterilen tooltip" placement="top" variant="dark" trigger="hover" maxWidth="220px" class="sapUiTinyMarginEnd">
      <ux7:ExButton id="idTopButton" text="Top" type="secondary" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipBottom" text="Altta gösterilen tooltip" placement="bottom" variant="light" trigger="hover" maxWidth="220px" class="sapUiTinyMarginEnd">
      <ux7:ExButton id="idBottomButton" text="Bottom" type="danger" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipLeft" text="Solda gösterilen tooltip" placement="left" variant="primary" trigger="hover" maxWidth="220px" class="sapUiTinyMarginEnd">
      <ux7:ExButton id="idLeftButton" text="Left" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipRight" text="Sağda gösterilen tooltip" placement="right" variant="success" trigger="hover" maxWidth="220px">
      <ux7:ExButton id="idRightButton" text="Right" />
    </ux7:ExTooltip>
  </FlexBox>

  <!-- Variants -->
  <ux7:ExTitle id="idVariantsExTitle" text="Variants" level="h3" variant="section" />
  <FlexBox id="idVariantsFlexBox" wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExTooltip id="idTipWarn" text="Dikkat gerektirir" placement="top" variant="warning" class="sapUiTinyMarginEnd">
      <ux7:ExButton id="idWarnButton" text="Warning" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipErr" text="Bir hata oluştu" placement="top" variant="error" class="sapUiTinyMarginEnd">
      <ux7:ExButton id="idErrButton" text="Error" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipGlass" text="Cam dokunuşlu tooltip" placement="top" variant="glass">
      <ux7:ExButton id="idGlassButton" text="Glass (NEW)" />
    </ux7:ExTooltip>
  </FlexBox>

  <!-- Rich content + kbd -->
  <ux7:ExTitle id="idRichExTitle" text="Rich content + kbd (NEW)" level="h3" variant="section" />
  <FlexBox id="idRichFlexBox" wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExTooltip id="idTipShare" title="Paylaş" body="Bu öğeyi ekibinizle paylaşın veya bağlantı oluşturun." placement="top" variant="dark" class="sapUiTinyMarginEnd">
      <ux7:ExButton id="idShareButton" icon="sap-icon://share" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipSave" text="Kaydet" kbd="Ctrl S" placement="top" variant="dark" class="sapUiTinyMarginEnd">
      <ux7:ExButton id="idSaveButton" icon="sap-icon://save" text="Kaydet" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipNew" title="Yeni dosya" body="Boş bir belge oluştur." kbd="Ctrl N" placement="top" variant="primary">
      <ux7:ExButton id="idNewButton" text="Yeni" type="Emphasized" />
    </ux7:ExTooltip>
  </FlexBox>

  <!-- Triggers + HTML -->
  <ux7:ExTitle id="idTriggerExTitle" text="Trigger + HTML" level="h3" variant="section" />
  <FlexBox id="idTriggerFlexBox" wrap="Wrap">
    <ux7:ExTooltip id="idTipClick" text="Tıklayınca açılır" placement="bottom" trigger="click" variant="warning" class="sapUiTinyMarginEnd">
      <Button id="idClickButton" text="Click Trigger" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipFocus" text="Sekme ile odaklan" placement="bottom" trigger="focus" variant="primary" class="sapUiTinyMarginEnd">
      <Button id="idFocusButton" text="Focus Trigger" />
    </ux7:ExTooltip>
    <ux7:ExTooltip id="idTipHtml" html="&lt;b&gt;Zengin&lt;/b&gt; HTML içerik &amp;mdash; &lt;i&gt;italik&lt;/i&gt;" placement="bottom" variant="dark">
      <Button id="idHtmlButton" text="HTML İçerik" />
    </ux7:ExTooltip>
  </FlexBox>

</VBox>