Tooltip

Add Tooltip to Any HTML Element

Add a tooltip attribute to any HTML element, and the value of the tooltip attribute will be the tooltip's content.

:: button:filled(label: "Add", icon_name: "add_shopping_cart", attributes: ["tooltip" => "Add the item to your cart."], radius: "round")

Automatic Horizontal Positioning

The item's width and its position on the page will allow SunSed Tooltip to calculate the correct position of the item's tooltip. As the bellow example shows, the button on the left will have its tooltip open on the right end while the button on the right will open its tooltip on its left.

$button_on_right = button:transparent(icon_name: "add", attributes: ["tooltip" => "Add item."])
$button_on_left = button:transparent(icon_name: "delete", attributes: ["tooltip" => "Delete item."])
row:column($button_on_right)
row:flexible_space()
row:column($button_on_left)
:: row:render()

Add Info Icon Tooltip

Tooltip:create, lets you add an info icon with a tooltip quickly to anywhere on your page. The info icon will inherit its size from its immediate parent and therefore fits nicely in any paragraph or headers.

Lets get schwifty info

Lorem Ipsum info Vestibulum mi ex, laoreet at posuere nec, fringilla vel tortor. Morbi nisl dui, blandit vitae pharetra a, dignissim eget ex. Nam facilisis odio non nulla tincidunt cursus. Vestibulum ac lorem eget purus porta mattis. Phasellus augue neque, tempor ut turpis sit amet, luctus fringilla quam. Donec in luctus arcu, ut cursus enim.
::h2 'Lets get schwifty' . tooltip:create("The state of ultimate relaxation")
::h5 'Lorem Ipsum ' . tooltip:create("Random Words") . "Vestibulum mi ex, laoreet at posuere nec, fringilla vel tortor. Morbi nisl dui, blandit vitae pharetra a, dignissim eget ex. Nam facilisis odio non nulla tincidunt cursus. Vestibulum ac lorem eget purus porta mattis. Phasellus augue neque, tempor ut turpis sit amet, luctus fringilla quam. Donec in luctus arcu, ut cursus enim."
Copyright © SunSed LLC 2013-2021 All rights reserved.