1. An Nguyen

    An Nguyen bụi Ban quản trị

    Bạn muốn hiện tooltip như vậy không
    2014-10-01_233448.
    Sau đây mình sẽ hướng dẫn chi tiết từng bước thực hiện
    Bước 1: HTML

    Tìm trong file Views\Shared\_ProductBox.cshtml
    Tìm
    HTML:
    1.  
    2. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
    Thêm và sửa thuộc tính titlemasterTooltip
    HTML:
    1.  
    2. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Html.Raw(Model.ShortDescription)" class="masterTooltip"/>
    3.  
    title là nội dung muốn hiện tooltip, @Html.Raw(Model.ShortDescription) chính là mô tả ngắn gọn về sản phẩm

    Bước 2: CSS
    Thêm đoạn CSS sau:
    HTML:
    1. .tooltip {
    2.     display:none;
    3.     position:absolute;
    4.     border:1px solid #333;
    5.     background-color:#161616;
    6.     border-radius:5px;
    7.     padding:10px;
    8.     color:#fff;
    9.     font-size:12px;
    10.     white-space:pre-line;
    11.     text-align: left;
    12. }
    13.  
    Đây là thiết lập css cho tooltip

    Bước 3: Jquery
    Tạo và chèn script này vào Views\Shared\_Root.Head.cshtml
    HTML:
    1. <script type="text/javascript">
    2. $(document).ready(function() {
    3. // Tooltip only Text
    4. $('.masterTooltip').hover(function(){
    5.         // Hover over code
    6.         var title = $(this).attr('title');
    7.         $(this).data('tipText', title).removeAttr('title');
    8.         $('<p class="tooltip"></p>')
    9.         .text(title)
    10.         .appendTo('body')
    11.         .fadeIn('slow');
    12. }, function() {
    13.         // Hover out code
    14.         $(this).attr('title', $(this).data('tipText'));
    15.         $('.tooltip').remove();
    16. }).mousemove(function(e) {
    17.         var mousex = e.pageX + 20; //Get X coordinates
    18.         var mousey = e.pageY + 10; //Get Y coordinates
    19.         $('.tooltip')
    20.         .css({ top: mousey, left: mousex })
    21. });
    22. });
    Có thể thay đổi tốc độ hiển thị tooltip ở dòng .fadeIn

    Chúc mọi người thực hành tốt nhé


    Tham khảo: alessioatzeni
     
    Sửa lần cuối: 1/10/14
    2
    KenMTkju47 thích bài này.
    KenMT kju47 thích bài này
    • ngày tạo

      An Nguyen 27/9/14
    • trả lời cuối

      An Nguyen 12/1/19
    • 4,030

      lượt xem

    • 4

      trả lời

    • 2

      lượt thích

    Đang tải...
  2. Tarzan

    Tarzan Gà con

    Bài viết hữu ích quá! Cảm ơn bạn!
     
  3. KenMT

    KenMT Tích cực

    Hay ....
     
  4. Tạ Tu Duy

    Tạ Tu Duy Gà con

    Mình không hiểu được bước 1
    cái này có video không ạ?
     
  5. An Nguyen

    An Nguyen bụi Ban quản trị

    Nếu nopcommerce mới nhất có thể khác chút, tức là mở filef như mnhì hướng dẫn ở trên trong thư mục nopcommerce
     
Mã xác nhận:
Đã lưu nháp Draft deleted
Đang tải...