टूल टिप्स

Question

मैं वर्तमान में सेट कुछ HTML की title विशेषता अगर मैं और अधिक जानकारी प्रदान करना चाहते हैं:

.more_info { 
    border-bottom: 1px dotted; 
} 

वर्क्स बहुत अच्छा, दृश्य सूचक स्थानांतरित करने के लिए: सीएसएस में फिर

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p> 

अधिक जानकारी के साथ माउस और फिर थोड़ा पॉपअप। लेकिन मोबाइल ब्राउज़र पर, मुझे वह टूलटिप नहीं मिलता है। title विशेषताएँ एक प्रभाव प्रतीत नहीं होता है। मोबाइल ब्राउज़र में टेक्स्ट के टुकड़े पर अधिक जानकारी देने का उचित तरीका क्या है? उपरोक्त के समान है लेकिन एक क्लिक सुनने के लिए जावास्क्रिप्ट का उपयोग करें और फिर टूलटिप-दिखने वाला संवाद प्रदर्शित करें? क्या कोई मूल तंत्र है?

Answer 1

आप जावास्क्रिप्ट के साथ शीर्षक टूलटिप व्यवहार नकली कर सकते हैं। जब आप title विशेषता वाले किसी तत्व पर/टैब पर क्लिक करते हैं, तो शीर्षक टेक्स्ट वाले बच्चे तत्व को जोड़ा जाएगा। दोबारा क्लिक करें और इसे हटा दिया जाता है।

जावास्क्रिप्ट (jQuery के साथ किया):

$("span[title]").click(function() { 
    var $title = $(this).find(".title"); 
    if (!$title.length) { 
    $(this).append('<span class="title">' + $(this).attr("title") + '</span>'); 
    } else { 
    $title.remove(); 
    } 
});​ 

सीएसएस:

.more_info { 
    border-bottom: 1px dotted; 
    position: relative; 
} 

.more_info .title { 
    position: absolute; 
    top: 20px; 
    background: silver; 
    padding: 4px; 
    left: 0; 
    white-space: nowrap; 
} 

डेमो: http://jsfiddle.net/xaAN3/

Answer 2

शीर्षक विशेषता एक तरह से किसी भी मोबाइल ब्राउज़र ** में समर्थित नहीं है कि यह टूलटिप को डेस्कटॉप माउस उपयोगकर्ताओं के समान दिखाएगा ** * (विशेषता स्वयं मार्कअप में समर्थित है) *।
यह केवल मूल रूप से डेस्कटॉप उपयोगकर्ताओं के लिए माउस के साथ है, कीबोर्ड केवल उपयोगकर्ता इसका उपयोग नहीं कर सकते हैं, या स्क्रीनreaders।

जैसा कि आपने कहा था, आप जावास्क्रिप्ट के साथ लगभग समान प्राप्त कर सकते हैं।

Answer 3

इस बात पर निर्भर करते हुए कि आप उपयोगकर्ता को कितनी जानकारी देना चाहते हैं, मोडल संवाद बॉक्स एक सुरुचिपूर्ण समाधान हो सकता है।

विशेष रूप से, आप qTip jQuery प्लगइन है, जो एक modal मोड $.click() पर निकाल दिया है आज़मा सकते हैं:

Answer 4

को देखते हुए आजकल बहुत से लोगों को (2015) मोबाइल ब्राउज़र का उपयोग करने वाले, और शीर्षक अभी भी hasn मोबाइल ब्राउज़र में एक्सपोजर का एक रूप नहीं मिला है, शायद यह अर्थपूर्ण जानकारी के लिए शीर्षक पर निर्भरता को कम करने का समय है।

इसे कभी भी महत्वपूर्ण जानकारी के लिए उपयोग नहीं किया जाना चाहिए, लेकिन अब यह उपयोगी जानकारी के लिए संदिग्ध हो रहा है, क्योंकि यदि वह जानकारी उपयोगी है और उपयोगकर्ताओं को आधा नहीं दिखाया जा सकता है, तो लगभग सभी उपयोगकर्ताओं को इसे दिखाने का एक और तरीका पाया जायेगा।

स्थिर पृष्ठों के लिए, शायद प्रासंगिक नियंत्रण के पास कुछ दृश्यमान पाठ, ठीक प्रिंट के रूप में भी। सर्वर से उत्पन्न पृष्ठों के लिए, ब्राउज़र स्नीफिंग केवल मोबाइल ब्राउज़र के लिए प्रदान कर सकता है। क्लाइंट साइड पर, वर्तमान में फोकस किए गए तत्व के बगल में अतिरिक्त टेक्स्ट दिखाने के लिए, बब्बलिंग के माध्यम से फोकस ईवेंट को फंसाने के लिए जावास्क्रिप्ट का उपयोग किया जा सकता है। इससे स्क्रीन की जगह कम हो जाएगी, लेकिन यह बहुत अधिक उपयोग नहीं होगा, क्योंकि कई मामलों में, नियंत्रण पर ध्यान केंद्रित करना केवल उसी तरीके से किया जा सकता है जो तुरंत अपनी क्रिया को सक्रिय करता है, पता लगाने की क्षमता को छोड़कर इसका इस्तेमाल करने से पहले इसके बारे में!

हालांकि, ऐसा लगता है कि मोबाइल उपकरणों पर शीर्षक विशेषता दिखाने की कठिनाइयों से अधिकतर सार्वभौमिक विकल्प की आवश्यकता के कारण इसकी मृत्यु हो सकती है। यह एक दयालुता है, क्योंकि सीमित स्क्रीन स्पेस लेने के बिना मोबाइल मांग पर ऐसी अतिरिक्त जानकारी दिखाने के लिए एक तरीका का उपयोग कर सकते हैं।

यह अजीब लगता है कि डब्ल्यू 3 सी और मोबाइल ब्राउज़र निर्माताओं ने इस मुद्दे के बारे में कुछ समय पहले कुछ नहीं किया था। कम से कम वे मेनू के शीर्ष पर शीर्षक टेक्स्ट प्रदर्शित कर सकते थे जो तब दिखाई देता है जब नियंत्रण पर एक लंबी प्रेस होती है।

Answer 5

flavaflo के जवाब का थोड़ा अधिक सविस्तार संस्करण:

• का उपयोग करता है पॉप-अप के रूप में पूर्व निर्धारित div कि HTML धारण कर सकते हैं, बल्कि एक शीर्षक विशेषता से पढ़ने से
• खोलता है/रोलओवर पर बंद कर देता है, तो माउस है प्रयुक्त
• क्लिक (टच स्क्रीन) पर खुलता है और दस्तावेज़ पर खुले पॉप-अप या कहीं और क्लिक पर बंद हो जाता है।

HTML:

<span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span> 

सीएसएस:

.more_info { 
    border-bottom: 1px dotted #000; 
    position: relative; 
    cursor: pointer; 
} 

.more_info .popup { 
    position: absolute; 
    top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/ 
    background: #fff; 
    border: 1px solid #ccc; 
    padding: 8px; 
    left: 0; 
    max-width: 240px; 
    min-width: 180px; 
    z-index: 100; 
    display: none; 
} 

JavaScript/jQuery:

$(document).ready(function() { 

    //init pop-ups 
    $(".popup").attr("data-close", false); 

    //click on pop-up opener 
    //pop-up is expected to be a child of opener 
    $(".more_info").click(function() { 
     var $title = $(this).find(".popup"); 
     //open if not marked for closing 
     if ($title.attr("data-close") === "false") { 
      $title.show(); 
     } 
     //reset popup   
     $title.attr("data-close", false); 
    }); 

    //mark pop-up for closing if clicked on 
    //close is initiated by document.mouseup, 
    //marker will stop opener from re-opening it 
    $(".popup").click(function() { 
     $(this).attr("data-close",true); 
    }); 

    //hide all pop-ups 
    $(document).mouseup(function() { 
     $(".popup").hide(); 

    }); 

    //show on rollover if mouse is used 
    $(".more_info").mouseenter(function() { 
     var $title = $(this).find(".popup"); 
     $title.show(); 
    }); 

    //hide on roll-out 
    $(".more_info").mouseleave(function() { 
     var $title = $(this).find(".popup"); 
     $title.hide(); 
    }); 

}); 

यहाँ डेमो https://jsfiddle.net/bgxC/yvs1awzk/

Answer 6

@cimmanon के रूप में उल्लेख किया गया: span[title]:hover:after { content: attr(title) } आपको टच स्क्रीन उपकरणों पर एक प्राथमिक टूलटिप देता है। दुर्भाग्यवश इसमें ऐसी समस्याएं हैं जहां टच स्क्रीन डिवाइस पर डिफ़ॉल्ट ui व्यवहार टेक्स्ट का चयन करना है जब कोई गैर-लिंक/यूकंट्रोल दबाया जाता है।

चयन समस्या को हल करने आप जोड़ सकते हैं span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

एक पूर्ण समाधान कुछ अन्य तकनीकों का उपयोग हो सकता है:

• position: absolutebackground, border, box-shadow आदि जोड़े यह एक टूलटिप की तरह लग रहे बनाने के लिए।
• उपयोगकर्ता touched को शरीर (जेएस के माध्यम से) में जोड़ें जब उपयोगकर्ता किसी भी स्पर्श ईवेंट का उपयोग करता है। तो फिर तुम डेस्कटॉप उपयोगकर्ताओं

document.body.addEventListener('touchstart', function() { 
 
    document.body.classList.add('touched'); 
 
});

[title] { 
 
\t border-bottom: 1px dashed rgba(0, 0, 0, 0.2); 
 
\t border-radius:2px; 
 
\t position: relative; 
 
} 
 
body.touched [title] > * { 
 
\t user-select: none; 
 
} 
 
body.touched [title]:hover > * { 
 
\t user-select: auto 
 
} 
 
body.touched [title]:hover:after { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t right: -10%; 
 
\t content: attr(title); 
 
\t border: 1px solid rgba(0, 0, 0, 0.2); 
 
\t background-color: white; 
 
\t box-shadow: 1px 1px 3px; 
 
\t padding: 0.3em; 
 
\t z-index: 1; 
 
}

<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>