የመሳሪያ ምክሮች

ለአኒሜሽን እና ለአካባቢያዊ የርዕስ ማከማቻ ዳታ-ባህሪያት CSS3 በመጠቀም ብጁ የቡትስትራፕ የመሳሪያ ምክሮችን ከCSS እና JavaScript ጋር ለመጨመር ሰነዶች እና ምሳሌዎች።

አጠቃላይ እይታ

የTooltip ፕለጊን ሲጠቀሙ ማወቅ ያለባቸው ነገሮች፡-

የመሳሪያ ምክሮች ለቦታ አቀማመጥ በ 3 ኛ ወገን ቤተ-መጽሐፍት ፖፐር ላይ ይመረኮዛሉ . የመሳሪያ ምክሮች እንዲሰሩ ከ bootstrap.js በፊት popper.min.jsን ማካተት አለቦት ወይም bootstrap.bundle.min.jsፖፐር bootstrap.bundle.jsየያዘውን ይጠቀሙ!
የእኛን ጃቫ ስክሪፕት ከምንጩ እየገነቡ ከሆነ ያስፈልገዋልutil.js ።
የመሳሪያ ምክሮች በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እነሱን እራስዎ ማስጀመር አለብዎት ።
ዜሮ-ርዝመት አርእስቶች ያላቸው የመሳሪያ ምክሮች በጭራሽ አይታዩም።
container: 'body'ይበልጥ ውስብስብ በሆኑ ክፍሎች (እንደ የግቤት ቡድኖቻችን፣ የአዝራር ቡድኖች፣ ወዘተ) ያሉ ችግሮችን ከመስጠት ለመዳን ይግለጹ ።
በተደበቁ አካላት ላይ ቀስቃሽ የመሳሪያ ምክሮች አይሰራም።
ለኤለመንቶች .disabledወይም ለኤለመንቶች የሚጠቅሙ ጥቆማዎች በማሸጊያ ኤለመንት disabledላይ መቀስቀስ አለባቸው።
ብዙ መስመሮችን ከሚሸፍኑ ሃይፐርሊንኮች ሲቀሰቀስ፣የመሳሪያ ምክሮች መሃል ይሆናሉ። ይህንን ባህሪ ለማስወገድ white-space: nowrap;በእርስዎ s ላይ ይጠቀሙ ።<a>
ተጓዳኝ አባላቶቻቸው ከDOM ከመወገዳቸው በፊት የመሳሪያ ምክሮች መደበቅ አለባቸው።
በጥላ DOM ውስጥ ላለ አካል ምስጋና ይግባው የመሳሪያ ምክሮች ሊነቃቁ ይችላሉ።

በነባሪ፣ ይህ አካል አብሮ የተሰራውን የይዘት ማጽጃ ይጠቀማል፣ ይህም በግልጽ ያልተፈቀዱትን የኤችቲኤምኤል ኤለመንቶችን ያስወግዳል። ለበለጠ ዝርዝር የጃቫ ስክሪፕት ሰነዶቻችን የንፅህና መጠበቂያ ክፍልን ይመልከቱ።

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

ያን ሁሉ አገኘህ? በጣም ጥሩ፣ ከአንዳንድ ምሳሌዎች ጋር እንዴት እንደሚሰሩ እንይ።

ምሳሌ፡ የመሳሪያ ምክሮችን በሁሉም ቦታ አንቃ

በአንድ ገጽ ላይ ያሉትን ሁሉንም የመሳሪያ ምክሮች የማስጀመር አንዱ መንገድ በባህሪያቸው መምረጥ data-toggleነው፡-

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ምሳሌዎች

የመሳሪያ ምክሮችን ለማየት ከታች ባሉት ማገናኛዎች ላይ ያንዣብቡ፡-

አራቱን የመሳሪያ ምክሮችን ለማየት ከታች ባሉት አዝራሮች ላይ አንዣብብ፡ ከላይ፣ ቀኝ፣ ታች እና ግራ።

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

እና በብጁ HTML ታክሏል፡-

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

አጠቃቀም

የ Tooltip ፕለጊን ይዘትን ያመነጫል እና በፍላጎት ላይ ምልክት ያደርጋል፣ እና በነባሪነት የመሳሪያ ምክሮችን ከቀስቀሳቸው ኤለመንት በኋላ ያስቀምጣል።

በጃቫስክሪፕት በኩል የመሳሪያውን ጥቆማ ያስነሱ፡

$('#example').tooltip(options)

የተትረፈረፈ `auto`እና`scroll`

የመሳሪያ ጥቆማ ቦታ የወላጅ መያዣ የእኛን ሲይዝ overflow: autoወይም ሲወድ በራስ ሰር ለመለወጥ ይሞክራል ፣ ነገር ግን አሁንም የመጀመሪያውን አቀማመጥ ያስቀምጣል። ለመፍታት፣ ምርጫውን ከነባሪ እሴት ውጭ ወደ ማንኛውም ነገር ያቀናብሩ ፣ ለምሳሌ ፡-overflow: scroll.table-responsiveboundary'scrollParent''window'

$('#example').tooltip({ boundary: 'window' })

ምልክት ማድረጊያ

ለመሳሪያ ጫፍ የሚፈለገው ምልክት ማድረጊያ dataባህሪ ብቻ ነው እና titleበኤችቲኤምኤል ኤለመንት ላይ የመሳሪያ ጥቆማ እንዲኖርዎት ይፈልጋሉ። የመነጨው የመሳሪያ ጫፍ ቀላል ነው፣ ምንም እንኳን ቦታ ቢፈልግም (በነባሪ፣ topበተሰኪው የተቀናበረ)።

የመሳሪያ ምክሮችን ለቁልፍ ሰሌዳ እና አጋዥ ቴክኖሎጂ ተጠቃሚዎች እንዲሰራ ማድረግ

በተለምዶ በቁልፍ ሰሌዳ-ተኮር እና በይነተገናኝ (እንደ ማገናኛዎች ወይም የቅጽ መቆጣጠሪያዎች) ወደ ኤችቲኤምኤል ክፍሎች የመሳሪያ ምክሮችን ማከል አለብዎት። ምንም እንኳን የዘፈቀደ የኤችቲኤምኤል ኤለመንቶች (እንደ <span>ዎች ያሉ) ባህሪውን በመጨመር ትኩረት እንዲሰጡ ማድረግ ቢቻልም tabindex="0"፣ ይህ ግን ለቁልፍ ሰሌዳ ተጠቃሚዎች መስተጋብራዊ ባልሆኑ አካላት ላይ ሊያበሳጩ እና ግራ የሚያጋቡ የትር ማቆሚያዎችን ይጨምራል፣ እና አብዛኛዎቹ አጋዥ ቴክኖሎጂዎች በአሁኑ ጊዜ በዚህ ሁኔታ የመሳሪያውን ምክሮች አያሳውቁም። በተጨማሪም፣ ለመሳሪያ ጥቆማዎ እንደ ቀስቅሴ ብቻ hoverአይተማመኑ፣ ምክንያቱም ይህ የመሳሪያ ምክሮች ለቁልፍ ሰሌዳ ተጠቃሚዎች መቀስቀስ የማይቻል ያደርገዋል።

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

የተሰናከሉ አባሎች

ባህሪው ያላቸው ንጥረ ነገሮች disabledበይነተገናኝ አይደሉም፣ ይህም ማለት ተጠቃሚዎች የመሳሪያ ምክሮችን (ወይም ብቅ-ባይ) ለመቀስቀስ ማተኮር፣ ማንዣበብ ወይም ጠቅ ማድረግ አይችሉም። እንደ መፍትሄ፣ የመሳሪያውን ጫፍ ከመጠቅለያ <div>ወይም <span>በቁልፍ ሰሌዳው ላይ ሊያተኩር የሚችል በመጠቀም ማስነሳት እና የአካል ጉዳተኛውን አካል tabindex="0"መሻር ይፈልጋሉ።pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-animation=""።

ለደህንነት ሲባል የ sanitize, sanitizeFnእና whiteListአማራጮች የውሂብ ባህሪያትን በመጠቀም ሊቀርቡ እንደማይችሉ ልብ ይበሉ.

ስም	ዓይነት	ነባሪ	መግለጫ
አኒሜሽን	ቡሊያን	እውነት ነው።	የ CSS ደብዝዝ ሽግግር ወደ መሳሪያ ጫፍ ተግብር
መያዣ	ሕብረቁምፊ \| ኤለመንት \| የውሸት	የውሸት	የመሳሪያውን ጫፍ ከአንድ የተወሰነ አካል ጋር ያያይዙታል። ምሳሌ `container: 'body'`፡. ይህ አማራጭ በተለይ ጠቃሚ ነው, ይህም የመሳሪያውን ጫፍ በማስነሻ አካል አቅራቢያ በሰነዱ ፍሰት ውስጥ እንዲያስቀምጡ ያስችልዎታል - ይህም የመሳሪያውን ጫፍ በመስኮት መጠን በሚቀይርበት ጊዜ ከሚቀሰቀሰው አካል ላይ እንዳይንሳፈፍ ይከላከላል.
መዘግየት	ቁጥር \| ነገር	0	የመሳሪያውን ጫፍ (ms) ማሳየት እና መደበቅ መዘግየት - በእጅ ቀስቅሴ አይነት ላይ አይተገበርም። ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል። የእቃው መዋቅር የሚከተለው ነው-`delay: { "show": 500, "hide": 100 }`
html	ቡሊያን	የውሸት	ኤችቲኤምኤል በመሳሪያ ፍንጭ ውስጥ ፍቀድ። እውነት ከሆነ፣ በመሳሪያ ጥቆማው ውስጥ ያሉ የኤችቲኤምኤል መለያዎች በመሳሪያ ጥቆማው ውስጥ `title`ይቀርባሉ። ውሸት ከሆነ፣ የjQuery `text`ዘዴ ይዘትን ወደ DOM ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
አቀማመጥ	ሕብረቁምፊ \| ተግባር	'ከላይ'	የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ራስ-ሰር \| ከላይ \| የታችኛው \| ግራ \| ቀኝ. መቼ`auto` ፣የመሳሪያውን ጫፍ በተለዋዋጭ አቅጣጫ ያዞራል። አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ ሲውል ከመሳሪያ ጫፍ DOM node ጋር እንደ መጀመሪያው መከራከሪያ እና ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ይባላል። ዐውደ- ጽሑፉ `this`የተቀናበረው በመሳሪያ ምክር ምሳሌ ላይ ነው።
መራጭ	ሕብረቁምፊ \| የውሸት	የውሸት	መራጭ ከቀረበ፣የመሳሪያ ምክር ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ በተለዋዋጭ ለተጨመሩ DOM አካላት ( `jQuery.on`ድጋፍ) የመሳሪያ ምክሮችን ተግባራዊ ለማድረግም ያገለግላል። ይህንን እና ጠቃሚ ምሳሌ ይመልከቱ ።
አብነት	ሕብረቁምፊ	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	የመሳሪያውን ጫፍ በሚፈጥሩበት ጊዜ ለመጠቀም HTML መሰረት ያድርጉ። የመሳሪያው `title`ጫፍ ወደ ውስጥ ይገባል `.tooltip-inner`. `.arrow`የመሳሪያው ጫፍ ቀስት ይሆናል። በጣም ውጫዊው የመጠቅለያ ክፍል `.tooltip`ክፍሉ እና ሊኖረው ይገባል `role="tooltip"`.
ርዕስ	ሕብረቁምፊ \| ኤለመንት \| ተግባር	''	ባህሪው ከሌለ ነባሪ የርዕስ ዋጋ `title`። አንድ ተግባር ከተሰጠ `this`የመሳሪያው ጫፍ ከተገጠመለት ንጥረ ነገር ጋር በማጣቀሻው ይጠራል.
ቀስቅሴ	ሕብረቁምፊ	'ማንዣበብ ትኩረት'	የመሳሪያ ቲፕ እንዴት እንደሚነሳ - ጠቅ ያድርጉ \| ማንዣበብ \| ትኩረት \| መመሪያ. ብዙ ቀስቅሴዎችን ማለፍ ይችላሉ; ከቦታ ጋር ይለያቸዋል. `'manual'.tooltip('show')`የመሳሪያው ጫፍ በ , `.tooltip('hide')`እና `.tooltip('toggle')`ዘዴዎች በፕሮግራም እንደሚቀሰቀስ ያመለክታል ; ይህ ዋጋ ከሌላ ቀስቅሴ ጋር ሊጣመር አይችልም. `'hover'`በራሱ በቁልፍ ሰሌዳው በኩል ሊነቃቁ የማይችሉ የመሳሪያ ምክሮችን ያስከትላል, እና ጥቅም ላይ መዋል ያለበት ለቁልፍ ሰሌዳ ተጠቃሚዎች ተመሳሳይ መረጃ ለማስተላለፍ አማራጭ ዘዴዎች ካሉ ብቻ ነው.
ማካካሻ	ቁጥር \| ሕብረቁምፊ \| ተግባር	0	ከዒላማው አንጻር የመሳሪያውን ጫፍ ማካካሻ። አንድ ተግባር ማካካሻውን ለመወሰን ጥቅም ላይ ሲውል የማካካሻ ውሂቡን ከያዘው ዕቃ ጋር እንደ መጀመሪያው መከራከሪያ ይባላል። ተግባሩ አንድ አይነት መዋቅር ያለው ነገር መመለስ አለበት. ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ነጋሪ እሴት ተላልፏል። ለበለጠ መረጃ የፖፐር ማካካሻ ሰነዶችን ይመልከቱ ።
fallbackPlacement	ሕብረቁምፊ \| ድርድር	'ግልብጥ'	ፖፐር በመውደቅ ላይ የትኛውን ቦታ እንደሚጠቀም እንዲገልጽ ፍቀድ። ለበለጠ መረጃ የፖፐር ባህሪ ሰነዶችን ይመልከቱ
ብጁ ክፍል	ሕብረቁምፊ \| ተግባር	''	በሚታይበት ጊዜ ክፍሎችን ወደ መሳሪያ ጫፍ ያክሉ። እነዚህ ክፍሎች በአብነት ውስጥ ከተገለጹት ክፍሎች በተጨማሪ እንደሚጨመሩ ልብ ይበሉ። ብዙ ክፍሎችን ለመጨመር በክፍተቶች ይለያቸዋል፡`'a b'` ፡. እንዲሁም ተጨማሪ የክፍል ስሞችን የያዘ ነጠላ ሕብረቁምፊ መመለስ ያለበትን ተግባር ማለፍ ይችላሉ።
ወሰን	ሕብረቁምፊ \| ኤለመንት	'ማሸብለል ወላጅ'	የትርፍ ፍሰት ገደብ የመሳሪያው ጫፍ. `'viewport'`የ , `'window'`, `'scrollParent'`, ወይም HTMLElement ማጣቀሻ (ጃቫስክሪፕት ብቻ) እሴቶችን ይቀበላል . ለበለጠ መረጃ የፖፐርን ከመጠን በላይ ፍሰትን የሚከላከሉ ሰነዶችን ይመልከቱ ።
ማጽዳት	ቡሊያን	እውነት ነው።	ንጽህናን አንቃ ወይም አሰናክል። ከነቃ `'template'`እና `'title'`አማራጮች ይጸዳሉ። በእኛ ጃቫስክሪፕት ሰነድ ውስጥ የንፅህና መጠበቂያ ክፍልን ይመልከቱ ።
ነጭ ዝርዝር	ነገር	ነባሪ እሴት	የተፈቀዱ ባህሪያትን እና መለያዎችን የያዘ ነገር
sanitizeFn	ባዶ \| ተግባር	ባዶ	እዚህ የራስዎን የንፅህና አገልግሎት መስጠት ይችላሉ. የንፅህና አጠባበቅን ለማከናወን የተለየ ቤተ-መጽሐፍት ለመጠቀም ከመረጡ ይህ ጠቃሚ ሊሆን ይችላል።
popperConfig	ባዶ \| ነገር	ባዶ	የ Bootstrapን ነባሪ የፖፐር ውቅረት ለመቀየር የፖፐርን አወቃቀር ይመልከቱ

ለግል የመሳሪያ ምክሮች የውሂብ ባህሪያት

ከላይ እንደተገለፀው ለነጠላ የመሳሪያ ምክሮች አማራጮች በመረጃ ባህሪያት አጠቃቀም በኩል ሊገለጹ ይችላሉ.

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

`$().tooltip(options)`

የመሳሪያ ቲፕ ተቆጣጣሪን ከአንድ ንጥረ ነገር ስብስብ ጋር ያያይዛል።

`.tooltip('show')`

የአንድ ንጥረ ነገር መሣሪያ ጫፍን ያሳያል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። shown.bs.tooltipይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል. ዜሮ-ርዝመት አርእስቶች ያላቸው የመሳሪያ ምክሮች በጭራሽ አይታዩም።

$('#element').tooltip('show')

`.tooltip('hide')`

የአንድ ንጥረ ነገር መሣሪያ ጫፍን ይደብቃል። የመሳሪያ ጥቆማው በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.tooltipክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.

$('#element').tooltip('hide')

`.tooltip('toggle')`

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይቀያይራል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

`.tooltip('dispose')`

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይደብቃል እና ያጠፋል። የውክልና ጥቆማዎችን የሚጠቀሙ (አማራጩን በመጠቀም የተፈጠሩ ) selectorበተወለዱ ቀስቃሽ አካላት ላይ በተናጠል ሊጠፉ አይችሉም።

$('#element').tooltip('dispose')

`.tooltip('enable')`

የመታየት ችሎታ ለአንድ ንጥረ ነገር መሣሪያ ጫፍ ይሰጣል። የመሳሪያ ምክሮች በነባሪነት ነቅተዋል።

$('#element').tooltip('enable')

`.tooltip('disable')`

የአንድ ኤለመንት መሣሪያ ጫፍ የመታየት ችሎታን ያስወግዳል። የመሳሪያ ጥቆማው እንደገና ከነቃ ብቻ ነው መታየት የሚችለው።

$('#element').tooltip('disable')

`.tooltip('toggleEnabled')`

የአንድ ንጥረ ነገር መሣሪያ ጫፍ የመታየት ወይም የመደበቅ ችሎታን ይቀያይራል።

$('#element').tooltip('toggleEnabled')

`.tooltip('update')`

የአንድ ንጥረ ነገር መሣሪያ ጫፍ ቦታን ያዘምናል።

$('#element').tooltip('update')

ክስተቶች

የክስተት አይነት	መግለጫ
አሳይ.bs.tooltip	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የሚታየው.bs.tooltip	ይህ ክስተት የሚቃጠለው የመሳሪያ ጥቆማው ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ደብቅ.bs.tooltip	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs.tooltip	ይህ ክስተት የሚቀጣጠለው የመሳሪያ ጥቆማው ከተጠቃሚው ተደብቆ ሲጠናቀቅ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ገብቷል.bs.tooltip	`show.bs.tooltip`የመሳሪያ ምክር አብነት ወደ DOM ከተጨመረ ይህ ክስተት ከክስተቱ በኋላ ተቃጥሏል።

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})