Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap tool tips look plain

Am trying to get a tooltip that has more styling than the plain text that a tool tip normally has.

I see that a Twitter Bootstrap tooltip is black, white text, has an arrow, etc.

My tool tips look like this:

plain tooltip

I have read that to fix this I need to add this:

<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

I did that and it has no effect.

The only thing I could possibly think might be affecting it is that this is an Aurelia application and I am doing this in a <template>.

Anything else I can be checking to see why this is not working?

Code:

<template>
     <script src="myPathToJQuery/[email protected]/jquery.js"></script>
     <script src="myPathToBootstrap/twbs/[email protected]/js/bootstrap.js"></script>
    <button type="button" class="btn btn-default" data-toggle="tooltip"
           data-placement="top" data-html="true" title="<b>Tooltip</b> <em>on </em> right">
        Tooltip on right
    </button>

    <script>
        $(function() { $("[data-toggle='tooltip']").tooltip(); });
    </script>
</template>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got an answer from an Aurelia team member. This is what he said:

    Bootstrap's tooltip component requires javascript. Use a custom attribute to execute the tooltip javascript

    import {customAttribute, inject} from 'aurelia-framework';
import $ from 'jquery';
import 'bootstrap';

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
  constructor(element) {
    this.element = element;
  }

  bind() {
    $(this.element).tooltip();
  }

  unbind() {
    $(this.element).tooltip('destroy');
  }
}

    Then on the element, add the bootstrap-tooltip attribute:

    <require from="./bootstrap-tooltip"></require>

<input bootstrap-tooltip data-toggle="tooltip" data-placement="top" data-title="bootstrap tooltip" title="html tooltip">

    It works against the aurelia skeleton app. (I will work it into my typescript app.)


  2. 0

    There is small mistake in your code

    ata-placement="top"

    You missed D letter from data-placement, your code should be:

            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-html="true" title="<b>Tooltip</b> <em>on </em> right">
        Tooltip on right
    </button>

    Instead of:

        <button type="button" class="btn btn-default" data-toggle="tooltip"
       ata-placement="top" data-html="true" title="<b>Tooltip</b> <em>on </em> right">
    Tooltip on right
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search