Source

የመሳሪያ ምክሮች

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

አጠቃላይ እይታ

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

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

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

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

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

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

ምሳሌዎች

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

ጠባብ ሱሪ next level keffiyeh ምናልባት ሳትሰሙት አልቀረም ። የፎቶ ቡዝ ጢም ጥሬ የዲኒም ደብዳቤ የቪጋን መልእክተኛ ቦርሳ ስቱምፕታውን። ከእርሻ ወደ ጠረጴዛ ሴይታን፣ የማሲስዊኒ መጠገኛ ዘላቂ ኩዊኖ 8-ቢት አሜሪካዊ አልባሳት ቴሪ ሪቻርድሰን ቪኒል ቻምበሬይ አላቸው ። Beard stumptown፣ cardigans banh mi lomo Thundercats። ቶፉ ባዮዳይዝል ዊሊያምስበርግ ማርፋ፣ አራት ሎኮ ማክስዊኒ የጸዳ ቪጋን ቻምበሬይ። በጣም የሚገርም የእጅ ባለሙያ ምንም ይሁን ምን keytar ፣ scenester farm-to-table banksy ኦስቲን ትዊተር እጀታ የፍሪጋን ክሬድ ጥሬ ጂንስ ነጠላ ምንጭ የቡና ቫይረስ።

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

<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=""።

ስም ዓይነት ነባሪ መግለጫ
አኒሜሽን ቡሊያን እውነት ነው። የ CSS ደብዝዝ ሽግግር ወደ መሳሪያ ጫፍ ተግብር
መያዣ ሕብረቁምፊ | ኤለመንት | የውሸት የውሸት

የመሳሪያውን ጫፍ ከአንድ የተወሰነ አካል ጋር ያያይዙታል። ምሳሌ container: 'body'፡. ይህ አማራጭ በተለይ ጠቃሚ ነው, ይህም የመሳሪያውን ጫፍ በማስነሻ አካል አቅራቢያ በሰነዱ ፍሰት ውስጥ እንዲያስቀምጡ ያስችልዎታል - ይህም የመሳሪያውን ጫፍ በመስኮት መጠን በሚቀይርበት ጊዜ ከሚቀሰቀሰው አካል ላይ እንዳይንሳፈፍ ይከላከላል.
መዘግየት ቁጥር | ነገር 0

የመሳሪያውን ጫፍ (ms) ማሳየት እና መደበቅ መዘግየት - በእጅ ቀስቅሴ አይነት ላይ አይተገበርም።

ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል።

የእቃው መዋቅር የሚከተለው ነው-delay: { "show": 500, "hide": 100 }
html ቡሊያን የውሸት

ኤችቲኤምኤል በመሳሪያ ፍንጭ ውስጥ ፍቀድ።

እውነት ከሆነ፣ በመሳሪያ ጥቆማው ውስጥ ያሉ የኤችቲኤምኤል መለያዎች በመሳሪያ ጥቆማው ውስጥ titleይቀርባሉ። ውሸት ከሆነ፣ የjQuery textዘዴ ይዘትን ወደ DOM ለማስገባት ስራ ላይ ይውላል።

ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
አቀማመጥ ሕብረቁምፊ | ተግባር 'ከላይ'

የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ራስ-ሰር | ከላይ | የታችኛው | ግራ | ቀኝ.
ሲገለጽ auto፣የመሳሪያውን ጫፍ በተለዋዋጭ አቅጣጫ ያዞራል።

አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ ሲውል ከመሳሪያ ጫፍ DOM node ጋር እንደ መጀመሪያው መከራከሪያ እና ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ይባላል። ዐውደ- ጽሑፉ thisየተቀናበረው በመሳሪያ ምክር ምሳሌ ላይ ነው።
መራጭ ሕብረቁምፊ | የውሸት የውሸት መራጭ ከቀረበ፣የመሳሪያ ምክር ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ ተለዋዋጭ የኤችቲኤምኤል ይዘት ብቅ-ባይ ታክሏል እንዲኖረው ለማድረግ ይጠቅማል። ይህንን እና ጠቃሚ ምሳሌ ይመልከቱ ።
አብነት ሕብረቁምፊ '<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 ከዒላማው አንጻር የመሳሪያውን ጫፍ ማካካሻ። ለበለጠ መረጃ የPopper.js ማካካሻ ሰነዶችን ይመልከቱ ።
fallbackPlacement ሕብረቁምፊ | ድርድር 'ግልብጥ' ፖፐር በመውደቅ ላይ የትኛውን ቦታ እንደሚጠቀም እንዲገልጽ ፍቀድ። ለበለጠ መረጃ የPopper.js ባህሪ ሰነዶችን ይመልከቱ
ወሰን ሕብረቁምፊ | ኤለመንት 'ማሸብለል ወላጅ' የመሳሪያው ጫፍ ከመጠን በላይ ፍሰት ገደብ. 'viewport'የ , 'window', 'scrollParent', ወይም HTMLElement ማጣቀሻ (ጃቫስክሪፕት ብቻ) እሴቶችን ይቀበላል . ለበለጠ መረጃ የPopper.jsን ከመጠን ያለፈ ፍሰትን ይመልከቱ ።

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

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

ዘዴዎች

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

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

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

$().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…
})