it-swarm.dev

تغيير لون تلميح أداة التمهيد

ما أحاول القيام به هو تغيير لون تلميح الأدوات إلى اللون الأحمر. ومع ذلك ، أريد أيضًا الحصول على ألوان أخرى متعددة ، لذلك لا أريد ببساطة استبدال لون تلميح الأدوات الأصلي.

كيف لي أن تذهب عن القيام بذلك؟

107
John Smith

يمكنك استخدام هذه الطريقة:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

وفي CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle


Moeen MH : مع أحدث إصدار من bootstrap ، قد تحتاج إلى القيام بذلك للتخلص من السهم الأسود:

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

استخدم هذا لـ Bootstrap 4:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

مقتطف كامل:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})
.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>
158
Praveen Kumar Purushothaman

Bootstrap 2

إذا كنت ترغب في تغيير علامة الإقحام/السهم أيضًا ، فقم بما يلي:

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color: #f00;}

أو

.red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}

jsFiddle: http://jsfiddle.net/technotarek/2htZe/

استكمال: Bootstrap 3

يجب أن تكون محددًا لاتجاه تلميح الأدوات في Bootstrap 3. على سبيل المثال:

.tooltip.top .tooltip-inner {
    background-color:red;
}
.tooltip.top .tooltip-arrow {
      border-top-color: red;
}

jsFiddle لجميع اتجاهات تلميح الأدوات باستخدام Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

105
technoTarek

الطريقة الوحيدة للعمل بالنسبة لي:

$(document).ready(function() {
  //initializing tooltip
  $('[data-toggle="tooltip"]').tooltip();
});
.tooltip-inner {
  background-color: #00acd6 !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #00acd6;
}
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!--Tooltip Example-->
<div style="padding:50px;">
  <span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>
55
Tuyen Cao

للحصول على لون السهم ، يمكنك استخدام هذا:

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}
10
zvictor

بالنسبة إلى bootstrap4 ، استخدمت الرمز:

.tooltip-inner {
  background-color: #color !important;
  color: #color ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #color !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #color !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #color !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #color !important;
}
7
GOTOLR

إصلاح مسج بلدي:

HTML:

   <a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
       <span class="glyphicon glyphicon-question-sign"></span>
   </a>

مسج:

$('[data-toggle="tooltip"]').hover(function(){
    $('.tooltip-inner').css('min-width', '400px');
    $('.tooltip-inner').css('color', 'red');
});
6
Dreal

من المهم ملاحظة أنه اعتبارًا من Bootstrap 4 ، يمكنك تخصيص هذه الأنماط مباشرة في ملف متغيرات Bootstrap Sass ، لذا في _variables.scss لديك هذه الخيارات:

//== Tooltips
//
//##

// ** Tooltip max width
$tooltip-max-width:           200px !default;
// ** Tooltip text color
$tooltip-color:               #fff !default;
// ** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

// ** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;

انظر هنا: http://v4-alpha.getbootstrap.com/getting-started/options/

من الأفضل العمل في Sass وتجميعها أثناء استخدام أدوات إنشاء Grunt أو Gulp.

5
Eric Grotke

يمكنك استخدام هذا لحل مشكلتك. راجعت في مشروعي وأنه يعمل بشكل جيد.

<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
    .media-tooltip + .tooltip .tooltip-inner {
        font-size: 14px; 
        font-weight: 700;
        color: rgb( 37, 207, 187 ); 
        border-width: 1px;
        border-color: rgb( 37, 207, 187 );
        border-style: solid;
        background-color: rgb( 219, 242, 239 );
        padding: 10px;
        border-radius: 0;
    } 
    .media-tooltip + .tooltip > .tooltip-arrow{display: none;}
    .media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
         bottom: 89%;
         left: 50%;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
    }

    .media-tooltip + .tooltip .tooltip-inner:after {
        border-color: rgba(219, 242, 239, 0);
        border-bottom-color: #dbf2ef;
        border-width: 10px;
        margin-left: -10px;
    }
    .media-tooltip + .tooltip .tooltip-inner:before {
        border-color: rgba(37, 207, 187, 0);
        border-bottom-color: #25cfbb;
        border-width: 11px;
        margin-left: -11px;
    }
4
Akther Hussain

تعمل الإجابات غير المذكورة أعلاه بشكل جيد في حالة container: 'body' ، والحل التالي يعمل:

// Assign custom CSS class after the tooltip template has been added to the DOM
$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

وموجز CSS بسيط:

.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}

.tooltip.tooltip-danger.left > .tooltip-arrow {
    border-left-color: #d9534f;
}

يمكنك الآن بدء تلميح الأدوات الخاص بك كصف عادي ، ويمرر فئة CSS مخصصة عبر سمة data-tooltip-custom-class:

<span class="js-tooltip">Hover me totally</span>

<script>
$('.js-tooltip')
    .data('tooltip-custom-class', 'tooltip-danger')
    .tooltip(/*your options*/)
;
</script>
2
Oleg

Bootstrap 3 + SASS for bottom tooltip:

.red-tooltip {
    & + .tooltip.bottom {
          .tooltip-inner{background-color:$red;}
          .tooltip-arrow {border-bottom-color: $red;}
    }
}
2
Bertrand

بالنسبة للسهم ، تأكد أولاً من الاتجاه الذي تستخدمه. على سبيل المثال ، أنا أستخدم left direction ، ثم يجب أن يكون

.tooltip .tooltip-inner {
    background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
   border-left-color: #2fa5fb;
}
2
Amir Iqbal

يبدو أنه قد تغير في Bootstrap 4

إذا كنت تريد تغيير لون تلميح الأدوات السفلي باللون الأحمر ، فما عليك سوى إضافة هذا إلى CSS الخاص بك:

.tooltip-inner {
    background-color: #f00;
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}
2
David

يمكنك استخدام quickapproach المذكورة في إجابات أخرى إذا كنت ترغب فقط في تغيير اللون. ومع ذلك ، إذا كنت تستخدم Bootstrap ، فيجب عليك استخدام السمات بحيث يكون الشكل والمظهر ثابتًا. لسوء الحظ ، لا يوجد دعم مضمّن لمظاهر Bootstrap ، لذا كتبت قطعة صغيرة من CSS تقوم بذلك. تحصل أساسًا على فصول tooltip-info ، tooltip-warning إلخ ، والتي يمكنك إضافتها إلى العنصر لتطبيق السمة.

يمكنك العثور على هذا الرمز مع كمان وأمثلة ومزيد من الشرح في هذه الإجابة: https://stackoverflow.com/a/20880312/207661

2
Shital Shah

السهم هو الحدود.
تحتاج إلى تغيير لكل سهم باللون المقابل.

.tooltip.top .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
  border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
  border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
  background-color: @color;
  font-size: @font-size-small;
}

ومع ذلك ، إذا أردت إضافة فصل دراسي لتغيير اللون (كما هو الحال في الكمان باستخدام '.class + .tooltip ...' فهو لا يعمل (bootstrap 3).
إذا كان شخص ما يعرف كيفية التعامل مع ذلك؟!؟

2
C0ZEN

تم بالفعل الرد على هذا بشكل صحيح ، لكنني أعتقد أنني يجب أن أقدم رأيي أيضًا. يقول مثل cozen أن هذا حد ، ولكي يعمل ، يجب عليك تحديد الفئات لتنسيق ذلك بنفس الطريقة التي يحددها bootstrap. لذلك ، يمكنك القيام بذلك

.tooltip .tooltip-inner {background-color: #00a8c4; color: black;} 
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}

أو يمكنك القيام بما يلي ، فقط لسهم تلميح الأدوات ولكن يجب عليك إضافة! المهم ، بحيث يقوم بالكتابة فوق bootstrap css

.tooltip-arrow {border-top-color: #00a8c4!important;}
2
Paulo Borralho Martins

سيؤدي ذلك إلى تغيير لون تلميح الأدوات في bootstrap4 الذي يمكنك استخدامه من أسفل ، يسار ، يمين لإضافة CSS لكل منها بدلاً من الأعلى في .bs-tooltip-top

.tooltip-inner {
background-color: #00acd6 !important;
color: #fff;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] 
.arrow::before {
border-top-color: #00acd6;
}
1
Manish

يمكنك استخدام هذه الطريقة:

وفي CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #000;}
1
Sandip

تعمل هذه الطريقة السهلة بالنسبة لي عندما أرغب في تغيير لون خلفية تلميحات أدوات التمهيد:

$(function(){
    //$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
    $('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
});
.red-tooltip.tooltip.tooltip.bottom .tooltip-arrow, 
.red-tooltip.tooltip.tooltip.bottom-left .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-right .tooltip-arrow{border-bottom-color: red;}
.red-tooltip.tooltip.top .tooltip-arrow {border-top-color: red;}
.red-tooltip.tooltip.left .tooltip-arrow {border-left-color: red;}
.red-tooltip.tooltip.right .tooltip-arrow {border-right-color: red;}
.red-tooltip.tooltip > .tooltip-inner{background-color:red;}
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Made by @Ram"
   class="tooltips red-tooltip">My link with red tooltip</a>

الملاحظة أ:

إذا js الكود يتضمن .data('tooltip') لا يعمل لك ، فالرجاء تعليق سطره و uncommentjs تتضمن كود .data('bs-tooltip').

الملاحظة B:

إذا وظيفة تلميح أداة bootstrap الخاصة بك أضف تلميح أداة إلى نهاية الجسم (ليس مباشرة بعد العنصر) ، حلي يعمل بشكل جيد بعد ولكن بعض الإجابات الأخرى في هذا لم تعمل الصفحات مثل Praveen Kumar و technoTarek في هذا السيناريو.

الملاحظة C:

تدعم هذه الرموز اللون tooltip arrow في جميع مواضع تلميح الأدوات (top ، bottom ، left ، right).

0
RAM

for Bootstrap 4 version عبر CSS:

إذا كنت تريد تغيير لون خلفية البالون :

/* change style balloon */
.tooltip-inner {
    background-color: green !important;
    color: #fff;
}

إذا كنت ترغب في تغيير السهم عند ظهوره في الموضع السفلي :

/* change style arrow */
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
}

آمل مساعدتك

0
Salvo

بالنسبة إلى Bootstrap 4 مع الاعتماد على tether.js ، تم استبدال فئات .tooltip - السهم بـ .tooltip.bs-tether-element-attached- [position] {...}

إليكم كيفية تغيير اللون والسهم السفلي السميك. مقابل كل بكسل تم إضافته إلى عرض الحدود ، اضطررت إلى طرح بكسل من موضع "أسفل".

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before {

    border-top-color: #d19b3d !important;
    border-width: 10px 10px 0;
    bottom: -5px;
}

يجب عليك ضبط المواضع الأخرى ، على سبيل المثال .tooltip.bs-tether-element-left-left ، ستقوم بضبط الحدود إلى اليمين ، وإعادة موضع إذا قمت برفع عرض الحدود عن طريق طرح البيكسلات من "يسار" ، إلخ.

0
deusoz

ضمن مشروع BS4 ، إذا كنت قادرًا على تجميع كود SASS ، يمكنك الاستفادة من إنشاء مزيج لإدارة نظام ألوان تلميحات الأدوات من أي اتجاه.

فوائد هذا النهج:

  • ليس عليك أن تضيف javaScript/jQuery إضافية لشيء ينطوي على التصميم.
  • يمكنك الاستفادة من SASS للتعامل بشكل ديناميكي مع العلامة التجارية لك.
  • يمكنك بسهولة التحكم في تلميحات الأدوات التي لها لون (ألوان) واتجاه (اتجاهات).

إليك إحدى الطرق العديدة التي يمكنك من خلالها تنفيذ هذا:

قم بإنشاء mixin الأصلي الخاص بك:

  • توفير متغير للون
  • عيّن معلمتين (واحدة لاسم الفئة المخصص في تلميح الأدوات ، والآخر للون). أود أيضا إضافة القيم الافتراضية لهذه المعلمات (اختياري).
  • قم بإنشاء قائمة وحلقة فوقها لتغطية جميع الاتجاهات الأربعة الممكنة

    //define a color
    $m-color-blue: #004c97;
    
    //create a mixin with parameters and default value
    @mixin m-tooltip-color-direction($name:'.mtootltip', $color:$m-color-blue) {
    
    //reference your custom class name
    #{$name} {
        .tooltip-inner {
            background-color: $color;
        }
    
        //create a list of possible directions
        $directions: top bottom left right;
    
        //loop through the list
        @each $direction in $directions {
            &.bs-tooltip-#{$direction} .arrow:before,
             .bs-tooltip-auto[x-placement^="$direction"] .arrow:before {
                border-#{$direction}-color: $color !important;
            }
         }
      }
    }
    


اتصل بمزيجك (اضبط اسم الفصل ولونه)

  • ضمن ملف .scss الرئيسي ، اتصل بمزيجك مثل:

    @include m-tooltip-color-direction('.mtooltip', $m-color-blue);
    


اضبط BS4 Tooltip في تخطيطك (اضبط الاتجاه)

  • أخيرًا ، أضف تلميح الأداة BS4 إلى التصميم الخاص بك ، وقم بمنحه فئة مخصصة للمرونة. هذا BS4 مورد محادثات حول استخدام القالب كخيار. سنستخدم ذلك لإضافة فصلنا المخصص.

  • يضيف المثال التالي تلميح أداة على شارة رمز المعلومات:

     <span class="badge badge-pill badge-primary" data-toggle="tooltip" data-placement="right" data-html="true" data-template="<div class='tooltip mtooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>" title="<h1 class='text-white'>Tooltip</h1> on bottom">i</span>
    


باستخدام هذا الإعداد ، يمكنك ضبط اسم الفئة ولونها واتجاه تلميح الأداة دون لمس المزيج الأصلي . كم ذلك رائع :)

أتمنى أن يساعدك هذا!

0
klewis

إجابة أوليغ https://stackoverflow.com/a/42994192/9921853 هي الأفضل هناك. يسمح بتطبيق أنماط تلميح الأدوات على العناصر التي تم إنشاؤها ديناميكيًا. ومع ذلك ، لا يعمل مع Bootstrap 4. يجب تعديله قليلاً:

Bootstrap 3:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

مثال: https://www.bootply.com/UORR04ncTP

Bootstrap 4:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    $(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});

مثال: https://jsfiddle.net/nsmcan/naq530hx

الحل الكامل (Bootstrap 3)

JSname__

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
});

$('body').tooltip({ 
    selector: "[title]", 
    html: true
});

HTMLname__

<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>

CSSname__

.tooltip.tooltip-large > .tooltip-inner {
    max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
    text-align: left;
}

.tooltip.top.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-left.tooltip-danger > .tooltip-arrow {
    border-top-color: #d9534f;
}
.tooltip.top-right.tooltip-danger > .tooltip-arrow {
    border-top-color:#d9534f;
}
.tooltip.right.tooltip-danger > .tooltip-arrow {
    border-right-color: #d9534f;
}
.tooltip.left.tooltip-danger > .tooltip-arrow {
    border-left-color: #d9534f;
}
.tooltip.bottom.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-left.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.bottom-right.tooltip-danger > .tooltip-arrow {
    border-bottom-color: #d9534f;
}
.tooltip.tooltip-danger > .tooltip-inner {
    background-color: #d9534f;
}
0
Sergey Nudnov

إذا كنت ترغب في استخدام jQuery يمكنك تجربة هذا:

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function(){
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', 'red');
    $('.tooltip-inner').css('background-color', 'red');
});
0
Indra S

نحن نستخدم bootstrap 3.0 على موقعنا على الإنترنت ، ولكن لم تنجح أي من الخطوات المذكورة أعلاه في تحديث تصميم تلميح الأدوات. لكنني وجدت حلاً باستخدام تصميم jQueryUI بدلاً من ذلك

https://jqueryui.com/tooltip/#custom-style

CSS

  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }

HTML

<div class="qu_help" data-toggle="tooltip" title="Some Random Title"> 
   <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</div>

أقوم بإضافة هذه الإجابة في حالة وجود شخص آخر في وضع مماثل كما كنت.

0
JhWebDevGuy

الطريقة الوحيدة للعمل بالنسبة لي:

.tooltip.bottom .tooltip-arrow{
    border-bottom-color:#F00;
}
0
Vivien

هذا عملت لي.

.tooltip .arrow:before {
    border-top-color: #008ec3 !important;
}

.tooltip .tooltip-inner {
    background-color: #008ec3;
}
0
Madian Malfi
$(document).ready(function(){
  $('.tooltips-elements')
    .tooltip()
    .each(function() {
        var color = $(this).data('color');
        $(this).hover(function(){
                var aria = $(this).attr('aria-describedby');
                $('#' + aria).find('.tooltip-inner').css({
                        "background": color,
                        "color" : "#333",
                        "margin-left" : "10px",
                        "font-weight" : "700",
                        "font-family" : "Open Sans",
                        "font-size" : "13px",
                });
                $('#' + aria).find('.tooltip-arrow').css({
                        "border-bottom-color" : color,
                });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" class="tooltips-elements" data-toggle="tooltip"  data-placement="bottom" data-original-title="Here comes the tooltip" data-color="red">Hover me</a>

تحقق هذا ربما يمكن أن تساعدك. يمكنك الحصول على لون تلميحات أدوات متعددة.

0
Dragos Nitescu