b-tooltip modifiers

<b-container fluid>
  <b-row>
    <b-col>
      <b-button id="button-1" variant="outline-success">Live chat</b-button>
    </b-col>
    <b-col md="4" class="py-4">
      <b-button id="button-2" variant="outline-success">Html chat</b-button>
    </b-col>
    <b-col md="4" class="py-4">
      <b-button ref="button-3" variant="outline-success">Alternative chat</b-button>
    </b-col>
  </b-row>

  <!-- Tooltip title specified via prop title -->
  <b-tooltip target="button-1" title="Online!"></b-tooltip>

  <!-- HTML title specified via default slot -->
  <b-tooltip target="button-2" placement="bottom">
    Hello <strong>World!</strong>
  </b-tooltip>

  <!-- Tooltip for an element identified by ref -->
  <b-tooltip :target="() => $refs['button-3']" title="Alternative!"></b-tooltip>
</b-container>

View another examples Add Own solution

Casey Willson 95 points

                                    &lt;b-container fluid&gt;
  &lt;b-row&gt;
    &lt;b-col md=&quot;2&quot; class=&quot;py-4&quot;&gt;
      &lt;b-button id=&quot;button-1&quot; variant=&quot;outline-success&quot;&gt;Live chat&lt;/b-button&gt;
    &lt;/b-col&gt;
    &lt;b-col md=&quot;4&quot; class=&quot;py-4&quot;&gt;
      &lt;b-button id=&quot;button-2&quot; variant=&quot;outline-success&quot;&gt;Html chat&lt;/b-button&gt;
    &lt;/b-col&gt;
    &lt;b-col md=&quot;4&quot; class=&quot;py-4&quot;&gt;
      &lt;b-button ref=&quot;button-3&quot; variant=&quot;outline-success&quot;&gt;Alternative chat&lt;/b-button&gt;
    &lt;/b-col&gt;
  &lt;/b-row&gt;

  &lt;!-- Tooltip title specified via prop title --&gt;
  &lt;b-tooltip target=&quot;button-1&quot; title=&quot;Online!&quot;&gt;&lt;/b-tooltip&gt;

  &lt;!-- HTML title specified via default slot --&gt;
  &lt;b-tooltip target=&quot;button-2&quot; placement=&quot;bottom&quot;&gt;
    Hello &lt;strong&gt;World!&lt;/strong&gt;
  &lt;/b-tooltip&gt;

  &lt;!-- Tooltip for an element identified by ref --&gt;
  &lt;b-tooltip :target=&quot;() =&gt; $refs['button-3']&quot; title=&quot;Alternative!&quot;&gt;&lt;/b-tooltip&gt;
&lt;/b-container&gt;

Thank you! 2

5 (2 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Other

Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
Other 2022-03-27 22:45:24 income of a web developer
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
Other 2022-03-27 22:30:45 rick roll embed code
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
Other 2022-03-27 22:20:05 iterative power
Other 2022-03-27 22:15:11 flutter run all
Other 2022-03-27 22:10:05 when is karlson release
Other 2022-03-27 22:10:02 wp .htaccess example
Other 2022-03-27 22:00:08 bash pause in file read line by line

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

b-tooltip modifiers

Welcome Back!

Create a Free Account