బ్రౌసర్ స్క్రిప్ట్ ట్యూటోరియల్ టూల్ టిప్స్

టూల్టిప్‌

టూల్టిప్‌ కాంపోనెంట్ ఒక చిన్న పప్పుకొరికి ఉంటుంది, వినియోగదారి ఎల్లప్పుడూ కాంపోనెంట్‌పై మౌస్ పింటర్‌ను కదిలించినప్పుడు ప్రకటిస్తుంది:

టూల్టిప్‌ని సృష్టించడం ఎలా చేస్తాము?

టూల్టిప్‌ని సృష్టించడానికి, ఈ నిర్దేశాలను జతచేయండి: data-bs-toggle="tooltip" వివరాలను కాంపోనెంట్‌కు జతచేయండి。

సహజంగా, టూల్టిప్ అంశం పైన కనిపిస్తుంది. title టూల్టిప్‌లో ప్రదర్శించే వినియోగదారి వివరాలు పేర్కొనండి:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="అద్భుతం!">నా మీద కస్తులు పెట్టండి!</button>

注释：కామెంట్:

టూల్టిప్ ప్రారంభం చేయడానికి జావాస్క్రిప్ట్ ఉపయోగించాలి.

ఈ కోడ్ డాక్యుమెంట్ లోని అన్ని టూల్టిప్ లను చేతనం చేయండి:
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})

స్వయంగా ప్రయత్నించండి

</script>

టూల్టిప్ స్థానాన్ని నిర్ణయించుట

సహజంగా, టూల్టిప్ అంశం పైన కనిపిస్తుంది. data-bs-placement అంశం పైన, క్రిందన, ఎడమ మరియు కుడివైపు స్థానంలో టూల్టిప్ అమర్చుటకు అంతర్జాతీయ అమర్చుట ఉపయోగించండి:

ఉదాహరణ

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="అద్భుతం!">హోవర్</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="అద్భుతం!">హోవర్</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="అద్భుతం!">హోవర్</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="అద్భుతం!">హోవర్</a>

స్వయంగా ప్రయత్నించండి