আপনি কীভাবে টুইটার বুটস্ট্র্যাপের টুলটিপগুলির প্রস্থ এবং উচ্চতা পরিবর্তন করবেন?

163

আমি টুইটার বুটস্ট্র্যাপ ব্যবহার করে একটি টুলটিপ তৈরি করেছি।

টুলটিপটি তিনটি লাইনের সাথে প্রদর্শিত হচ্ছে। তবে, আমি কেবল একটি লাইনের সাহায্যে টুলটিপটি প্রদর্শন করতে চাই।

আমি কীভাবে টুলটিপটির প্রস্থ পরিবর্তন করব? এটি কি টুইটার বুটস্ট্র্যাপের সাথে নির্দিষ্ট বা নিজেরাই সরঞ্জামদণ্ডগুলির সাথে নির্দিষ্ট?

twitter-bootstrap  tooltip 
— onejigtwojig
সূত্র
1
আপনি কি একটি উত্তর গ্রহণ করতে পারেন? এটি অন্যকেও সহায়তা করবে।
— মেরোজ

উত্তর:

210

বুটস্ট্র্যাপ সিএসএস ওভাররাইড করুন

BS2 এ ডিফল্ট মানটি সর্বোচ্চ-প্রস্থ: 200px; সুতরাং আপনার প্রয়োজন অনুসারে আপনি এটি বাড়িয়ে তুলতে পারেন।

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}
— ভ্যালেনটিন দেশপা
সূত্র
13
max-widthআমার জন্য কাজ করে না, তবে widthকরে। Chrome এবং IE9 এ পরীক্ষিত। কোন সুত্র?
— রোজদি কাসিম
2
আমার ক্ষেত্রে, সর্বাধিক প্রস্থ এবং প্রস্থ উভয়ই সেট করা ভাল কাজ করেছে যেহেতু। টুটিটিপ-ইনারটি সর্বাধিক প্রস্থ (200px) এর চেয়ে কম ছিল যদিও এর প্রচুর পাঠ্য রয়েছে।
— নুবু
কেবল যুক্ত করুন! এটির মতো গুরুত্বপূর্ণ এটি সর্বাধিক প্রস্থের কাজ করবে: 350px! গুরুত্বপূর্ণ;
— সোহেল আনোয়ার
1
এখনও কারও জন্য সমস্যা রয়েছে max-widthএবং নীচে @ নোবলির উত্তর দেখতে না পেয়ে দয়া করে data-container="body"আপনার এইচটিএমএল উপাদানটি ব্যবহার করুন ।
— কিপস 15
সিএসএস সংশোধন করা শেষ উপায় হতে হবে। জিকিউরিটি টুলটিপটির চেহারা পরিবর্তন করতে কার্যকারিতা সরবরাহ করে তাই কেন এটি ব্যবহার করবেন না?
— E 10
42

বিএস 3-তে

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}
— Shina
সূত্র
28

আমি বুঝতে পারি এটি একটি খুব পুরানো প্রশ্ন, তবে আমি যদি এখানে অবতরণ করি তবে অন্যরাও তা-ই করবে। সুতরাং আমি অনুভব করেছি যে আমি ওজন করব।

আপনি যদি চান যে এই সরঞ্জামটি কোনও লাইনেই প্রতিক্রিয়াশীল হয় তবে আপনি এতে যত পরিমাণ সামগ্রী যুক্ত করেন তা বিবেচনা না করে প্রশস্ততা নমনীয় হতে হবে। তবে বুটস্ট্র্যাপ টুলটিপটি প্রস্থে শুরু করে, তাই আপনাকে কমপক্ষে সেই প্রস্থটি কী হবে তা ঘোষণা করতে হবে এবং সেটিকে আকার থেকে উপরে নমনীয় করে তুলতে হবে। এটিই আমি সুপারিশ করছি:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

min-widthশুরুর আকার ঘোষণা করে। সর্বাধিক প্রস্থের বিপরীতে যেমন অন্য কেউ পরামর্শ দেবেন, যা এটি থামার প্রশস্ততা ঘোষণা করে । আপনার প্রশ্ন অনুসারে, আপনার চূড়ান্ত প্রস্থের ঘোষনা করা উচিত নয় বা আপনার সরঞ্জামদণ্ডের সামগ্রীটি শেষ পর্যন্ত মোড়বে। পরিবর্তে, আপনি একটি অসীম প্রস্থ বা নমনীয় প্রস্থ ব্যবহার করেন।max-width: 100%;এটি নিশ্চিত করে তুলবে যে একবারে টুলটিপটি 100px প্রশস্তভাবে শুরু হয়ে গেলে এটি আপনার সামগ্রীতে যে পরিমাণ পরিমাণ বিষয়বস্তু রয়েছে তা নির্বিশেষে এটি আপনার সামগ্রীতে বৃদ্ধি এবং সামঞ্জস্য হবে।

মনে রেখ রাখুন টুলটিপস প্রচুর সামগ্রী বহন করার উদ্দেশ্যে নয়। পুরো পর্দা জুড়ে আপনার যদি দীর্ঘ স্ট্রিং থাকে তবে এটি দেখতে চমত্কার লাগবে। এবং এটি অবশ্যই আপনার প্রতিক্রিয়াশীল দর্শনগুলিতে, বিশেষত স্মার্টফোনের (320px প্রস্থ) প্রভাব ফেলবে।

আমি এটি নিখুঁত করার জন্য দুটি সমাধানের সুপারিশ করব:

  1. আপনার টুলটিপ সামগ্রীটি সর্বনিম্ন রাখুন যাতে 320px প্রশস্ত না হয়। এমনকি আপনি এটি করলেও আপনার অবশ্যই মনে রাখতে হবে আপনার যদি স্ক্রিনের ডানদিকে এবং সহ টুলটিপটি রাখা আছেdata-placement:right আপনার সরঞ্জামটিপ সামগ্রীটি স্মার্টফোনে দৃশ্যমান হবে না (সুতরাং বুটস্ট্র্যাপ কেন প্রাথমিকভাবে এগুলিকে এর সামগ্রীতে সাড়া দেওয়ার জন্য ডিজাইন করেছিল এবং এটির অনুমতি দেয় মোড়ানো)
  2. আপনি যদি এই এক লাইনের টুলটিপ ধারণাটি ব্যবহার করতে নারাজ হন @mediaতবে স্মার্টফোনের দৃশ্যের সাথে মানিয়ে নিতে আপনার সরঞ্জামদণ্ডটি পুনরায় সেট করতে কোয়েরি ব্যবহার করে আপনার ছয়টি cover েকে রাখুন। এটার মত:

আমার ডেমো এখানে সামগ্রীর আকার এবং ডিভাইস প্রদর্শন আকার অনুযায়ী সরঞ্জামদ্বারে নমনীয়তা এবং প্রতিক্রিয়া দেখায়

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}
— LOTUSMS
সূত্র
23

আপনার নিজের সিএসএস ব্যবহার করে বৈশিষ্ট্যগুলি ওভাররাইট করা উচিত। তাই ভালো:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

নির্বাচক ডিভটি বেছে নিন যা টুলটিপটি রাখা হয়েছে (জাতির স্ক্রিপ্ট দ্বারা টুলটিপটি যুক্ত করা হয়েছে এবং এটি সাধারণত কোনও ধারক নয়।

— nglinh
সূত্র
2
শুধু কৌতূহলী, আপনি কি ওভাররাইডিং স্টাইলকে 'ডিভ [শ্রেণি = "সরঞ্জামদ্বার-অভ্যন্তরীণ"]' হিসাবে সংজ্ঞায়িত করার মতো সাধারণ 'ডিভ টোলটিপ-ইনার' হিসাবে নির্দিষ্ট করার কোনও বিশেষ কারণ আছে?
— স্ল্যাভেক
6
আমি যখন এই
— সিএসএসে
21

"গুরুত্বপূর্ণ!" সহ সর্বাধিক প্রস্থ নির্ধারণ করুন এবং ডেটা-ধারক ব্যবহার করুন = "বডি"

সিএসএস ফাইল

.tooltip-inner {
    max-width: 500px !important;
}

এইচটিএমএল ট্যাগ

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

জেএস স্ক্রিপ্ট

$('.tooltiplink').tooltip();
— knobli
সূত্র
18
data-container="body"এটা একা আমার জন্য ধন্যবাদ!
— ইজাকি
17

প্রস্থের সমস্যাটি ঠিক করতে, পরিবর্তে নিম্নলিখিত কোডটি ব্যবহার করুন।

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

উদাহরণ: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

— 戈 晓伟
সূত্র
4
আমার মতে সেরা উত্তর কারণ এটিতে বুটস্ট্র্যাপ সিএসএস পরিবর্তন করা অন্তর্ভুক্ত নয়।
— টিম স্কার্বারো
1
এটি আমার পক্ষে সেরা উত্তর, তবে এটি প্রশ্নের উত্তর দেয় না
— বেনগালা
এটি আমার মনে হয় সেরা সমাধান। এটি সিএসএস বুটস্ট্র্যাপ ওভাররাইডের পরিবর্তে টুলটিপ কনফিগারেশন ব্যবহার করে।
— César
এটি FAAAR দ্বারা সেরা উত্তর। জিকিউরিটি টুলটিপে সমস্ত ধরণের জিনিস করার জন্য কার্যকারিতা সরবরাহ করে, তবে কেন এটি ব্যবহার করবেন না? সিএসএস সংশোধন করা শেষ উপায় হতে হবে।
— E 10
10

আরেকটি সমাধান; সিএসএসে একটি নতুন ক্লাস তৈরি করুন (উদাঃ টুলটিপ-প্রশস্ত):

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

এমন উপাদানগুলিতে এই শ্রেণিটি ব্যবহার করুন যেখানে আপনি প্রশস্ত টুলটিপস চান:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

বুটস্ট্র্যাপ টুলটিপটি টুলটিপযুক্ত উপাদানটির নীচে মার্কআপ উত্পন্ন করে, তাই মার্কআপটি উত্পন্ন হওয়ার পরে এইচটিএমএল আসলে এরকম কিছু দেখায়:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

সিএসএস এটিকে সর্বাধিক প্রস্থের বৈশিষ্ট্য প্রয়োগ করার আগে সংলগ্ন উপাদান (+) থেকে টলটিপ-প্রশস্ত করতে এবং সেখান থেকে। টোলটিপ-অভ্যন্তরে নেভিগেট করতে ব্যবহার করে। এটি কেবলমাত্র টোলটিপ-বিস্তৃত শ্রেণি ব্যবহার করে এমন উপাদানগুলিকে প্রভাবিত করবে, অন্য সমস্ত সরঞ্জামদণ্ডগুলি আনআল্টারড থাকবে।

— হয়
সূত্র
2
দুর্দান্ত সমাধান কারণ আপনি এটি ব্যবহার করতে চান এমন কোন টুলটিপগুলি চয়ন করতে পারেন।
— উইল
1
বুটস্ট্র্যাপ 4-এ, সরঞ্জামদণ্ডটি শরীরে সংযুক্ত হয়ে যায়। তবে এর সাথে data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"এবং .tooltip-wide { max-width: 100%; min-width: 80%; }একজন এটি কাজে লাগাতে পারে to
— মাত্তেও ফেরলা
BS4 টুলটিপগুলির সাহায্যে টেমপ্লেটগুলি ব্যবহার করে আমি এটি প্রথম বাস্তব জীবনের উদাহরণ। দুর্দান্ত ডেমো এবং এটিতে কাস্টম ক্লাস যুক্ত করার স্বাচ্ছন্দ্য।
— ক্লিভিস
8

আপনি বুটস্ট্র্যাপ সিএসএসে। টলটিপ-অভ্যন্তরীণ CSS শ্রেণি সম্পাদনা করতে পারেন। ডিফল্ট সর্বোচ্চ-প্রস্থ 200px। আপনি সর্বাধিক প্রস্থটি আপনার পছন্দসই আকারে পরিবর্তন করতে পারেন।

— onejigtwojig
সূত্র
এটি প্রস্থ সামঞ্জস্য করতে দুর্দান্ত! ধন্যবাদ! উপরের উত্তরের সাথে এটিও সম্পূর্ণ সমাধান!
— এটিসিয়েম
6
যেমন @ ইংলিংহ বলেছেন: "এটি আসলেই প্রস্তাবিত নয়"। বুটস্ট্র্যাপ আপডেট করার সময় আপনি আপনার সমস্ত হ্যাকের ট্র্যাক রাখতে চান না।
— ভ্যালেন্টাইন দেশপা
7

কিছু পরীক্ষার পরে, এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}
— Xerus
সূত্র
6

max-widthআপনার প্রয়োজন অনুসারে ডিফল্টকে ওভাররাইড করুন ।

.tooltip-inner {
  max-width: 350px;
}

যখন সর্বোচ্চ-প্রস্থ কাজ করে না (বিকল্প 1)

যদি সর্বোচ্চ-প্রস্থ কাজ না করে, আপনি পরিবর্তে একটি সেট প্রস্থ ব্যবহার করতে পারেন। এটি ভাল, তবে আপনার সরঞ্জামদণ্ডগুলি আর পাঠ্যের মাপসইয়ের জন্য আকার পরিবর্তন করবে না। যদি আপনি এটি পছন্দ না করেন তবে বিকল্প 2 এ যান।

.tooltip-inner {
  width: 350px;
}

ছোট পাত্রে সঠিকভাবে ডিলিং (বিকল্প 2)

যেহেতু বুটস্ট্র্যাপটি টুলটিপটিকে লক্ষ্যবস্তুর ভাইবোন হিসাবে সংযোজন করে, তাই এটি উপাদানটি অন্তর্ভুক্ত করে। যদি যুক্ত উপাদানটি আপনার চেয়ে ছোট হয় max-widthতবেmax-width কাজ করবে না।

সুতরাং, যখন max-widthকাজ করে না, আপনার কেবলমাত্র container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

প্রো টিপ: কনটেইনারটি কোনও নির্বাচক হতে পারে, আপনি যখন কয়েকটি সরঞ্জামদণ্ডে কেবল স্টাইলকে ওভাররাইড করতে চান তখন তা দুর্দান্ত।

— anson
সূত্র
4

শ্রেণিকে প্রধান টুলটিপ ডিভ এবং অভ্যন্তরীণ সরঞ্জামদণ্ডের জন্য সেট করুন

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
— ছোট
সূত্র
এটি কি ন্যূনতম প্রস্থ নয়?
— রিপো
4

নীচের পোস্টটি উল্লেখ করুন। সিএমসিপ্লোহ-এর উত্তর আমার পক্ষে কাজ করেছিল। https://stackoverflow.com/posts/31683500/edit

ডকুমেন্টেশনে ইঙ্গিত হিসাবে , আপনার টুলটিপটি মোটেও মোড়ানো না হয় তা নিশ্চিত করার সবচেয়ে সহজ উপায় হ'ল ব্যবহার করা

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

এটির সাহায্যে আপনাকে মাত্রিক মান বা এর মতো কিছু নিয়ে চিন্তা করতে হবে না। মূল সমস্যাটি হ'ল যদি আপনার একটি দীর্ঘ দীর্ঘ লাইনের পাঠ্য থাকে তবে এটি কেবল পর্দার বাইরে চলে যাবে (আপনি জেএসবিন উদাহরণে দেখতে পারেন )।

— রাজাসেখর কালীসামী
সূত্র
2

বুটস্ট্র্যাপ 4 এ এবং আপনি যদি সমস্ত সরঞ্জামদণ্ডের প্রস্থ পরিবর্তন করতে না চান তবে আপনি যে টুলটিপটি চান তার জন্য নির্দিষ্ট টেম্পলেট ব্যবহার করতে পারেন:

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>
— ভিনসেন্ট ডেকাউস
সূত্র
1

আমার একই সমস্যা ছিল, তবে সমস্ত জনপ্রিয় উত্তর - .tooltip-inner{width}আমার কাজটি সঠিকভাবে করতে ব্যর্থ হওয়ার জন্য পরিবর্তন করতে। অন্যান্য হিসাবে (অর্থাত্ সংক্ষিপ্ত) সরঞ্জামদণ্ডগুলির স্থির প্রস্থটি অনেক বড় ছিল। আমি টুলটিপসের জিলিয়নগুলির জন্য পৃথক এইচটিএমএল টেমপ্লেট / ক্লাস লিখতে অলস ছিলাম, তাই আমি কেবল &nbsp;প্রতিটি পাঠ্য লাইনে শব্দের মধ্যে সমস্ত স্পেস প্রতিস্থাপন করেছি ।

— Ignas
সূত্র
1

আমার কিছু টুলটিপগুলির প্রস্থ সামঞ্জস্য করা দরকার। তবে সামগ্রিক সেটিং নয়। সুতরাং আমি এই কাজ শেষ করেছি:

সিএসএস

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

এইচটিএমএল

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
— Julesezaar
সূত্র
0

শ্রেণীর টুলটিপ-অভ্যন্তর সর্বাধিক প্রস্থের সেট করা আমার পক্ষে কাজ করে না , I bootm বুটস্ট্র্যাপ ৩.২ ব্যবহার করে

কিছু আপনি কীভাবে পিতাম শ্রেণীর প্রস্থ নির্ধারণ করেন সর্বাধিক প্রস্থের সেটিংটি কীভাবে কাজ করে Some পিতামাত্ত (। টোলটিপ) Some

তবে তারপরে সমস্ত সরঞ্জামদণ্ডগুলি আপনার নির্দিষ্ট আকারে পরিণত হয়। সুতরাং এখানে আমার সমাধান:

অভিভাবক শ্রেণিতে প্রস্থ যুক্ত করুন:

.tooltip {
  width:400px;
}

তারপরে আপনি সর্বাধিক প্রস্থ যুক্ত করুন এবং প্রদর্শনটি ইনলাইন-ব্লকে পরিবর্তন করুন, যাতে এটি পুরো স্থানটি দখল করে না 

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}
— ড্যানিয়েল
সূত্র
এটি সরঞ্জামদণ্ডের প্রান্তিককরণের সাথে বিশৃঙ্খলা সৃষ্টি করে।
— বেন
0

আমার যেখানে সমস্ত পরিবর্তনশীল দৈর্ঘ্য এবং একটি সেট সর্বাধিক প্রস্থ আমার পক্ষে কাজ করে না তাই আমার সিএসএসকে 100% এ সেট করে মোহন হিসাবে কাজ করেছে।

.tooltip-inner {
    max-width: 100%;
}
— শন
সূত্র
0

বুটস্ট্র্যাপ 4 সহ আমি ব্যবহার করি

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}
— Wishmaster
সূত্র
-1

বুটস্ট্র্যাপ 3.0.3 এ আপনি পপওভার ক্লাসটি সংশোধন করে এটি করতে পারেন

.popover {
    min-width: 200px;
    max-width: 400px;
}
— Ekim
সূত্র
3
.পোপার ক্লাসটি টুলটিপসে প্রয়োগ হয় না।
— আদ্রিয়ান টিজসেলিং
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.