BS Tooltip

HTML
CSS
C#
SQL

Tooltip

Bootstrap tooltips provide an elegant and interactive way to display additional information to users. They are small popovers that appear when users hover, focus on, or tap an element. Tooltips are useful for adding context or extra information to elements without cluttering the UI.

Implementing Basic Tooltips

<button type=”button” class=”btn btn-secondary” data-toggle=”tooltip” data-placement=”top” title=”Tooltip on top”>

  Hover over me

</button>

 

<script>

  $(document).ready(function(){

    $(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips

  });

</script>

Explanation:

– The button is equipped with a tooltip through the `data-toggle=”tooltip”` attribute.

– The `data-placement` attribute specifies where the tooltip appears relative to the element (`top`, `bottom`, `left`, `right`).

– The `title` attribute contains the text to be displayed in the tooltip.

– Tooltips are initialized with jQuery: `$(‘[data-toggle=”tooltip”]’).tooltip()`. This is necessary for tooltips to function.

 

Advanced Tooltips with HTML Content

<a href=”#” data-toggle=”tooltip” data-html=”true” title=”<em>Formatted</em> <u>text</u> <b>here</b>”>

  Hover over me

</a>

 

<script>

  $(document).ready(function(){

    $(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips

  });

</script>

Explanation:

– This example demonstrates a tooltip with HTML-formatted content.

– The `data-html=”true”` attribute allows HTML tags to be included in the `title` attribute, enabling more complex tooltip content.

– Similar to the previous example, the tooltip is initialized with jQuery.

Customizing Tooltips

Changing Tooltip Colors

CSS for Custom Tooltip Colors:

css

.tooltip.custom-tooltip .tooltip-inner {

  background-color: #5cb85c; /* Green background */

  color: #fff; /* White text */

}

.tooltip.custom-tooltip .arrow::before {

  border-top-color: #5cb85c; /* Arrow color for ‘top’ placement */

}

<button type=”button” class=”btn btn-default” data-toggle=”tooltip” data-placement=”top” title=”Custom color tooltip” data-template='<div class=”tooltip custom-tooltip” role=”tooltip”><div class=”arrow”></div><div class=”tooltip-inner”></div></div>’>

  Hover over me

</button>

 

<script>

  $(document).ready(function(){

    $(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips

  });

</script>

 

Explanation:

– Custom CSS classes (`custom-tooltip`) are defined to change the background and text color of the tooltip.

– The `data-template` attribute is used to apply these custom classes to the tooltip.

Tooltips with Delayed Show/Hide

<button type=”button” class=”btn btn-info” data-toggle=”tooltip” data-placement=”right” title=”I take time to show” data-delay='{“show”:”500″, “hide”:”100″}’>

  Hover over me

</button>

 

<script>

  $(document).ready(function(){

    $(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips

  });

</script>

Explanation:

– The `data-delay` attribute allows setting a delay in milliseconds for the tooltip’s show and hide actions.

– In this example, the tooltip will take half a second (500ms) to appear and a tenth of a second (100ms) to disappear after the cursor moves away.

Bootstrap tooltips are a versatile component that can be customized extensively to fit the design and interaction requirements of a website or application. They provide a user-friendly way to present additional information without adding clutter to the interface.