Araç ipucu nasıl oluşturulur?

Uzun bir uzunluk 25-30'den fazla sarılacak bir araç ipucu için özel bir CSS sınıfı oluşturmak istiyorum. Neredeyse böyle uzun bir metin tootltip metin alanına sığmıyor.Araç ipucu nasıl oluşturulur?

Ve yine de Tooltip (ui.bootstrap.tooltip) kullanarak bunu yapmak için var mı? İstenen çıktıyı almak için özel CSS sınıfı kullanmak gibi.

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    
 
    max-width:100px; 
 
    padding:15px; 
 
    min-height:30px; 
 
    background:#fff; 
 
    visibility: hidden; 
 
    border: 1px solid black; 
 
    color: #000; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
}

<body style="text-align:center;"> 
 

 
<p>Move the mouse over the text below:</p> 
 

 
<div class="tooltip">Hover over me 1 
 
    <span class="tooltiptext">Tooltip text</span> 
 
</div> 
 
<div class="tooltip">Hover over me 2 
 
    <span class="tooltiptext">Array [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,,1,11,1,1,1,11,1,,1,1,1,1,1,1,1,1,1,1,1,1,1,1]</span> 
 
</div> 
 
</body>

kaynak

2016-03-29 Pooja Kedar

Sen dek yaptığımız bize göstermek gerekir şimdi. –

@Satej burada demo http://plnkr.co/edit/qhnkkTNfl9i7zu7aMXFJ?p=preview –

Böyle bir şey ister misiniz? Http: //plnkr.co/edit/4xoSrItVinIvPTy89ldO? P = önizleme –

CSS Çözüm

eldeki probleme çok basit bir çözüm vardır. Esasen eklediklerim, araç ipucu metninizi çevreleyen sınıfa aşağıdaki CSS kodu 'dur. İşte

bu ben Açısal UI kullanıyorum ne iyi read

olduğunu da bir working demo

mı?

açısal ui bir ipucu şekillendirme için, ipucu koduna tooltip-class="tooltip" ilave edildi. İşte

Bu değiştirilmiş plunkr İşte Angular UI documentation

kaynak

2016-03-29 06:41:56

bu https: //angular-ui.github kullanarak yapabiliriz. io/bootstrap/#/tooltip Tooltip (ui.bootstrap.tooltip) –

Evet, işte buradasınız. Aynı stil için denemeyi denemeniz gerekecek ama işe yarayacak. [link] (http://plnkr.co/edit/ujp5AGHmMSCBn2ZXbc1S?p=preview).Have ayrıca cevabını düzenledi –

evet iyi çalışıyor –

Bir kullanacağım boyutlandırmak olacak bazı css hileler oluşturabilirsiniz: -

Bu basit css araç ipucu İşte Plunker DEMO

aynı kod Snippet içeriğe göre araç ipucu.

Genişlik ve yükseklik varsayımları ile ilgili bir örnek aşağıda verilmiştir. css Üstü

.tooltip{ 
    max-width:100px; 
    padding:15px; 
    min-height:30px; 
    background:#000;/*change accordingly*/ 
}

içerikler uyacak düzeltme maksimum genişlik ve resizeable yüksekliği ile bir div yaratacaktır.

kaynak

2016-03-29 04:55:21

Lütfen bu demoya göz atın http://plnkr.co/edit/qhnkkTNfl9i7zu7aMXFJ?p=preview İkinci metnin tamamını gör alan ı, araç ipucu alanı. ne yapabilirim? –

Bu sorun iş arasında boşluk yok çünkü ... bir css özelliği kullanabilirsiniz '' kelime-break: break-work' dinlenme –

elde edilir working demo with angular

bir ilk yükleme yordamı özel araç ipucu tam kodudur olduğunu

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $("[data-toggle=tooltip]").tooltip(); 
}); 


    </script> 
    <style> 
    .tooltip.top .tooltip-inner { 
    background-color:red; 
    } 
.tooltip.top .tooltip-arrow { 
      border-top-color: red; 
     } 
.tooltip.right .tooltip-inner { 
    background-color:blue; 
    } 
.tooltip.right .tooltip-arrow { 
      border-right-color: blue; 
     } 
.tooltip.bottom .tooltip-inner { 
    background-color:green; 
    width:400px; 
    height:50px; 
    padding-top:10px; 
    } 
.tooltip.bottom .tooltip-arrow { 
      border-bottom-color: green; 
     } 
.tooltip.left .tooltip-inner { 
    background-color:yellow; 
    } 
.tooltip.left .tooltip-arrow { 
      border-left-color: yellow; 
     }      
    </style> 
</head> 
<body> 

    <div class="container"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <h1>Colored Tooltip</h1> 
    </div> 
    <div class="col-sm-3"> 
     <h3>Top</h3> 
     <a href="#" data-toggle="tooltip" title="This tooltip is on top!">Hover to see my tooltip</a> 
    </div> 
    <div class="col-sm-3"> 
     <h3>Right</h3> 
     <a href="#" data-placement="right" data-toggle="tooltip" title="This tooltip is on the right!">Hover to see my tooltip</a> 
    </div> 
    <div class="col-sm-3"> 
     <h3>Bottom</h3> 
     <a href="#" data-placement="bottom" data-toggle="tooltip" title="This tooltip is on the bottom!">Hover to see my tooltip</a> 
    </div> 
    <div class="col-sm-3"> 
     <h3>Left</h3> 
     <a href="#" data-placement="left" data-toggle="tooltip" title="This tooltip is on the left!">Hover to see my tooltip</a> 
    </div> 
    </div> 
</div> 
</body> 
</html>

kaynak

2017-09-16 16:48:49 ankush

teşekkürler :) @ankush –

Araç ipucu nasıl oluşturulur?

cevap

İlgili konular