Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से लेफ्ट टूलटिप सेट करें

लेफ्ट टूलटिप सेट करने के लिए, right CSS प्रॉपर्टी का उपयोग करें।

किसी टेक्स्ट पर लेफ्ट टूलटिप सेट करने के लिए निम्न कोड चलाकर देखें:

उदाहरण

<!DOCTYPE html> <html>    <style>       .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: orange;          color: white;          z-index: 1;          top: -6px;          right: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;          margin-left: 150px;       }       .mytooltip:hover .mytext {          visibility: visible;       }    </style>    <body>       <div class = "mytooltip">Keep mouse cursor over me          <span class = "mytext"> My Tooltip text</span>       </div>    </body> </html>

  1. - CSS से टूलटिप के दाईं ओर एरो (तीर) जोड़ें

    CSS में टूलटिप के दाईं ओर एरो (तीर) जोड़ने के लिए ::after स्यूडो-एलिमेंट और CSS बॉर्डर ट्रिक का उपयोग किया जाता है। left प्रॉपर्टी से एरो को टूलटिप के बाईं ओर (यानी टूलटिप के दाईं ओर) पोजीशन किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, टूलटिप के दाईं ओर एक नीला तीर बनाया गया है। <!DOCTYPE html&

  1. - CSS से टूलटिप के ऊपर एरो (तीर) जोड़ें

    CSS में टूलटिप के ऊपर एरो (तीर) जोड़ने के लिए ::after स्यूडो-एलिमेंट और CSS बॉर्डर ट्रिक का उपयोग किया जाता है। bottom प्रॉपर्टी से एरो को टूलटिप के नीचे (यानी टूलटिप के ऊपर) पोजीशन किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, टूलटिप के ऊपर एक नीला तीर बनाया गया है। <!DOCTYPE html> <html&

  1. CSS के साथ फ्लोटिंग एलिमेंट्स CSS के साथ फ्लोटिंग एलिमेंट्स

    CSS float प्रॉपर्टी का उपयोग किसी बॉक्स या कंटेंट को पोजिशन या फॉर्मेट करने के लिए किया जाता है। डेवलपर CSS float का उपयोग करके एलिमेंट को बाएं या दाएं पोजिशन कर सकते हैं।Float प्रॉपर्टी के मानfloat प्रॉपर्टी के निम्नलिखित मान हो सकते हैं:left - एलिमेंट अपने कंटेनर के बाएं फ्लोट करता हैright - एलिमे